ROU-12714: Update OutSystemsUI components to use new theme#1145
Open
OS-susmitabhowmik wants to merge 38 commits into
Open
ROU-12714: Update OutSystemsUI components to use new theme#1145OS-susmitabhowmik wants to merge 38 commits into
OS-susmitabhowmik wants to merge 38 commits into
Conversation
… APIs
- Replace hardcoded px heights with scale tokens ($token-scale-800/1000/1200/1400/1600)
across btn, button-group, inputs-and-textareas, table
- Add CSS API vars (--osui-*) for consumer-overrideable dimensions:
switch (height/width/thumb/offsets), checkbox (size), radio (size/indicator-border),
dropdown (list-max-height), popup (max-width), popover (max-width),
feedback-message (max/min-width), list-item (ripple/overlay)
- Fix missing #{} interpolation in --osui-* declarations across input,
dropdown, popover, feedback-message, upload
- Correct --osui-button-group-border-color/color defaults from primary
to $token-border-default / $token-text-default
- Add --osui-btn-height CSS API var; fix .btn-cancel border-color → $token-border-default
- Add --osui-bg-neutral-subtlest future-token candidate to _root.scss
- Update specs/part-two.md: mark completed height/interpolation/color items,
add review-passes and open-issues sections
Add plan entries for five components present in the design review but missing from the checklist: Dropdown Tags (#39), TimePicker (#40), MonthPicker (#41), DatePicker Range (#42), Header (#43). Each entry includes file paths, token swap items, and motion notes derived from jessicamendesos.github.io/jess-ui-review.
…ntries - Rename specs/part-two.md → specs/plan-part-two.md - Promote 9 components that ARE in the design review from the B-section to numbered entries with full design-review specs: #44 Tag, #45 User Avatar, #46 Section, #47 Chat Message, #48 Animated Label, #49 Overflow Menu, #50 Dropdown Search, #51 Table, #52 Sidebar - Fix B-section header: "Blocks not yet in the design review" → "Components not covered by the design review" - Re-number remaining B-section to B1–B7 (Video, Lightbox Image, Bottom Bar Item, Input With Icon, Stacked Cards, Floating Actions, Submenu); remove duplicated Table and Sidebar entries
- accordion-item: fix --osui-accordion-item-color interpolation, font-size 450→400, padding 600→300/600, active border-size to $token-border-size-050, icon/plus-minus dimensions to scale tokens - alert: fix --osui-alert-color interpolation, border-radius 300→200, padding 400→300/400, remove border-left, add gap replacing margin, font-size/weight on message, clean up accent-color var and RTL section
- Add --color-focus-outer to _root.scss as alias for --osui-border-focus-halo (22% primary blue); update _resets.scss, _html-elements-link.scss, _menu-app-menu-links.scss, _tabs.scss, _submenu.scss to use it - Accordion title links: always underlined with 3px offset; focus shows --color-focus-outer background and underline colour - Accordion title placeholder: override margin-top-s on child <a>/<button> to restore align-self: center - Accordion disabled state: child links and buttons get opacity 0.4 - Alert: tonal background variants, flex-start icon alignment, gap-based layout, border-radius and font-size token swaps - Button group: token swap for border-color and color on rest state
…omponents Expand all @include a11y-default-outline / a11y-high-contrast-outline calls and $token-primitives-yellow-500 focus ring literals to use var(--color-focus-outer) in: pagination, rating, bottom-bar-item, section-index, sidebar, master-detail, dropdown, radio-button, button-group, list-item, table, lightbox-image, animated-label, accordion-item, carousel, overflow-menu, floating-actions, range-slider, action-sheet, dropdown-serverside, dropdownserversideitem, flatpickr, virtualselect, tabs
Badge: correct sizes (scale-500/400/700), padding (0 6px default),
primary-lightest uses semantic tokens, secondary-lightest logged as
missing token gap
Blank-slate: fix missing #{} interpolation on --osui-blank-slate-description-color
Bottom-sheet: update open transition to $token-transition-time-500,
update easing to cubic-bezier(0.32, 0.72, 0, 1)
Breadcrumbs: add font-size/weight/color, link hover, last-item styles,
transition; fix separator selector to match actual HTML structure (> div > .icon);
add RTL icon flip
- _alert.scss: remove leftover `border-left: none` (no accent border in new design) - _btn.scss: full token-var migration — CSS API vars for all variants, explicit transition list (was `all 100ms linear`), token heights for responsive sizes, primary/cancel hover states, single opacity-only disabled rule, `gap` via token; btn-neutral/btn-circle not added (out of scope for token migration) - _button-loading.scss: remove redundant `display: inline-flex` on .btn - _bottomsheet.scss: revert transition-function to original design value (0.19, 0.35, 0.56, 0.96) — deliberate motion decision, not a token gap - specs/plan-part-two.md: update button section to reflect completed work
- _button-group.scss: upgrade hover from $token-primitives-neutral-100
to $token-border-subtle (same value, semantic layer)
- _card-item.scss: fix missing #{} interpolation on
--osui-card-detail-title-color; upgrade primitive neutral-700 to
$token-text-subtlest (theme-safe semantic equivalent)
- specs/plan-part-two.md: update button-group and card sections
- _button-loading.scss: spinner height/width 16px → $token-scale-400; border-radius 50% → $token-border-radius-full - _carousel.scss: arrow icon color → $token-text-default; add --osui-carousel-pagination-color ($token-border-default) CSS API var with rest-state override; track border-radius $token-border-radius-300 + overflow hidden; arrow transition 150ms → $token-transition-time-150 - specs/plan-part-two.md: add Button Loading section; update Carousel
- _carousel.scss: pagination dots border-radius → $token-border-radius-full; active pill width → $token-scale-700 with transition; track border-radius $token-border-radius-300; arrow icon → $token-text-default; arrow transition → $token-transition-time-150; pagination rest color → $token-border-default - _card-sectioned.scss: card-image padding → 0 (flush); card-title color $token-text-default; card-bottom background #fafbfc + border-top $token-border-subtle + flex align-items center + .btn width 100%; padding 14px $token-scale-500 - _chat-message.scss: received bubble $token-primitives-neutral-300 → $token-bg-neutral-subtle-default; border-radius → $token-border-radius-200; avatar 50% → $token-border-radius-full - _checkbox.scss: transition all → explicit background-color/border-color; disabled bg $token-bg-input-disabled → $token-border-subtle
- DatePicker: merge nav arrow and month/year color to token vars; add hasWeeks column styling; today button scoped override; timepicker within datepicker as segmented input (48px columns, focus ring); date-range inRange color-mix band; prevMonthDay/nextMonthDay hover border transparent - TimePicker standalone: fix numInputWrapper to fixed 48px columns - MonthPicker: today ring uses token-border-default; hide today indicator when another month is selected via :has(.selected)
- Remove library box-shadow fake border on .flatpickr-weeks - Fix standalone timepicker numInputWrapper to fixed 48px columns
- VirtualSelect: font-weight regular on all options, display:block on vscomp-ele, hide checkbox-icon (right-side checkmark only), suppress browser focus rings inside dropbox-container, a11y search focus-within - Native dropdown (_dropdown.scss): border-radius-200, border-default, elevation-overlay on list, semi-bold + checkmark on selected row, font-weight regular override for platform inline style (!important) - Dropdown Server Side: transparent bg + checkmark on selected item, font-weight regular override for platform .bold class, a11y search focus ring moved to balloon-search-wrapper:focus-within
…y ring on serverside search wrapper
…-label icon spacing - floating-actions: replace transition:all with explicit property lists, tokenize heights (56px→scale-1400, 40px→scale-1000), add [data-link] underline styles scoped to item, add prefers-reduced-motion block - flip-content: transition:all → transition:transform (explicit property) - animated-label: icon-aware label left offset via :has(); input padding adjustments for left/right icon variants
…xt rules - icon-badge: reposition badge to top-right, add inline-flex layout, tokenize height/min-width to scale-400, font-weight-bold, ring shadow via CSS API var, transform translate(50%,-50%); font-size 0.625rem hardcoded (token gap: $token-font-size-200 missing) - inputs: border-color default → $token-border-default; hover/focus use border-color property only + outline:none on focus; transition:all → explicit border-color/background-color at time-100; add label, help-block, validation-message rules; prefers-reduced-motion block - colors-semantic: add font-size:$token-font-size-300 to .text-error
…tem to token vars - prefers-reduced-motion: accordion-item, alert, btn, carousel, checkbox, breadcrumbs, radio-button, switch, virtualselect, flatpickr, flip-content (plus animated-label, floating-actions, inputs, list-item from prior commits) - list-item: simplify CSS API (remove ripple/overlay vars), ripple color → color-mix, selected state → color-mix tint, hover → $token-border-subtle, transition + reduced-motion block
…fix link underlines and datepicker today styles - master-detail: remove border, set border-radius-0, add chevron icon via CSS var, tokenize transitions, a11y focus ring - notification: add type variants (info/success/error/warning) matching alert pattern; fix color interpolation - feedback-message: switch type variants from solid semantic colors to subtle backgrounds matching alert; add direct background-color/color to override app-level CSS; update layout to match alert (gap, padding, font-size) - floating-actions: remove spurious data-link underline block - datepicker: fix today border-color to use $token-border-default (lighter than monthpicker) - monthpicker: tokenize today state with $token-border-input-default; add transition and reduced-motion - html-elements-link: suppress underline on a[data-link] focus/hover - colors-semantic: remove .text-error font-size override
…ning widgets to token vars - tabs: update border-color, add hover/active color vars, color-mix hover bg, indicator transitions, focus ring - switch: rework to token vars for track/thumb sizing, border on hover/checked, focus-visible ring, disabled states - inputs/textarea: fix textarea padding to uniform 16px, validation-message font-size, a11y focus color - overflow-menu: fix interpolation, border-radius, width tokens, text-decoration - popup: border-radius-100 → border-radius-200 - radio-button, table, range-slider, pagination, progress-circle, rating: token var migration - card, card-sectioned, flatpickr providers: token var fixes
…d bridge var
GetBorderRadiusValueFromShapeType('rounded') had no legacy CSS var to read in
_root.scss, forcing runtime TS fallback resolution. Add all three shape bridge
vars (none, soft, rounded) so the full var(--border-radius-*, ...) chain works
consistently at the CSS layer.
- add --color-* bridge vars to _root.scss (mirrors existing --border-radius-* bridge pattern) so GetColorValueFromColorType() resolves named color entities (primary, secondary, neutral, neutral-0..10, error, warning, success, info) to token-backed values instead of falling through to invalid CSS color names - update rating SCSS to use --token-rating-filled/empty-color vars applied via .text-primary / .text-neutral-5 overrides scoped to .rating
…on-index to token vars
- avatar: fix #{} interpolation on --osui-avatar-on-light-color; swap hardcoded px sizes
to $token-scale-*; add font-size-300 base; avatar-small/medium selectors with token sizes;
remove per-colour lightest overrides (utility classes handle bg; retain neutral/transparent
context colour overrides); 0.625rem for small font (token gap: $token-font-size-200 missing)
- tooltip: fix #{} on --osui-tooltip-background; z-index --os-layer-global-negative →
--layer-global-negative; add override block for border-radius-200 / 6px 12px padding;
add @Keyframes osui-tooltip-in entrance animation + prefers-reduced-motion guard
- balloon: z-index --os-layer-elevated → --layer-global-elevated
- plan: update avatar section; add User Avatar to $token-font-size-200 missing-tokens entry
…ds, submenu, rating, user-avatar to token vars
- tooltip: fix #{} interpolation, z-index vars, add entrance animation with reduced-motion guard, design-spec padding
- wizard: tokenize icon size, connector calcs, active box-shadow via color-mix, font-weight; fix z-index vars
- timeline: tokenize icon/line colors with DOM-isolation fallbacks, $token-scale-700 icon size, layout padding
- header: tokenize menu-icon line dimensions to $token-border-size-050 / $token-scale-500 / $token-border-radius-full
- overflow-menu: add .desktop specificity override to prevent blue btn:hover border bleed
- stacked-cards: fix transition: all → explicit properties; replace SS preview hex colors with CSS API vars; design-spec annotations
- submenu: full token migration, CSS API vars, max-height, border-radius, hover transitions
- rating: fix z-index vars (--layer-* → --os-layer-*)
- user-avatar: fix #{} interpolation, tokenize sizes, fix background color selectors
- plan-part-two.md: mark all above sections complete
OS-susmitabhowmik
changed the title
…grations
- fix missing #{} interpolation on --osui-* CSS vars in theme-dark, list-item-content, dropdown-serverside, dropdownserversideitem
- merge duplicate .animated-label selectors; deduplicate &.active and &-text blocks
- merge duplicate .rating selector; fold icon colour rules into main block
- merge duplicate .osui-tooltip selector; fold design-spec overrides into CSS API block
- merge duplicate .tablet/.phone selector in submenu
- merge duplicate .numInputWrapper .numInput selectors in flatpickr date-picker
- inline & {} SS preview wrappers in dropdownserversideitem to fix duplicate & selectors
- migrate sidebar, bottom-bar-item, input-with-icon, lightbox-image to token vars
- fix input-with-icon: remove incorrect !important padding overrides added from reference
- plan-part-two.md: mark all remaining sections complete
…interpolations
- wizard: --osui-wizard-focus-halo-width 3px → #{$token-border-size-075}; calc 4px/8px → $token-scale-100/200
- submenu: scrollbar width 4px → $token-scale-100; focus box-shadow 3px → $token-border-size-075; annotate 80px design-spec
- animated-label: focus box-shadow 3px → $token-border-size-075; annotate 14px/10px token gaps and -16px design-spec
66 pure token swaps:
- 3px focus rings/outlines → $token-border-size-075
- 40px → $token-scale-1000
- 48px → $token-scale-1200
- 24px → $token-scale-600
- 20px → $token-scale-500
- 16px → $token-scale-400
- 12px → $token-scale-300
- 8px → $token-scale-200
- 4px → $token-scale-100
- CSS custom property declarations use #{$token-*} interpolation
Also updates specs/plan-part-two.md missing tokens table with newly
identified gaps: $token-scale-175 (7px), scale-30px, and expanded
entries for 14px and $token-font-size-200.
- 16px border-radius vars → #{$token-border-radius-400} (balloon, overflow-menu, bottom-sheet)
- 56px draggable area → #{$token-scale-1400} (bottom-sheet)
- 6px border-radius ×4 → $token-scale-150 (scrollable-area scrollbar)
- 3px margins/offsets → $token-scale-075 (dropdown, dropdown-serverside, switch, rangeslider)
- 6px left offset → $token-scale-150 (form validation message)
- Fix wrong annotation: bottom: 10px token gap → $token-scale-250 (animated-label)
- Remove duplicate a11y focus rule in submenu
Remove the CSS fallback for --progress-color in __progress-path so the stroke is unset until JS sets it from the user-configured ProgressColor property. Move the token default to -servicestudio-stroke for Service Studio preview, matching the existing progress bar pattern.
| --osui-semantics-orange-base: #{$token-primitives-orange-700}; /* future: --token-semantics-orange-base */ | ||
| --osui-semantics-orange-base: #{$token-primitives-orange-700}; /* future: --token-semantics-orange-base */ | ||
|
|
||
| /*! Legacy shape bridge — used by TS GetBorderRadiusValueFromShapeType() via --border-radius-<shape> */ |
Contributor
Author
There was a problem hiding this comment.
I added these legacy shape and color bridges because the values didn't seem to get picked up without them
Contributor
There was a problem hiding this comment.
We should later see what is that TS code and if it can be changed. Ideally we don't add these variables defined here
| } | ||
|
|
||
| // Reduced motion ---------------------------------------------------------------- | ||
| @media (prefers-reduced-motion: reduce) { |
Contributor
Author
There was a problem hiding this comment.
These reduced motion changes are based on user settings (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion). @jessicamendesOS confirmed that we should keep them for a11y
Contributor
There was a problem hiding this comment.
Also commented on button, I think we don't need to repeat them, lets use * and remove all transitions.
Although on a side note, it should not be none, ideally the transition is just slower, hence the name recuded-motion, not no-motion
| } | ||
| } | ||
|
|
||
| .has-accessible-features .osui-submenu:focus-within { |
Contributor
Author
There was a problem hiding this comment.
I removed this because the submenu previously had two accessibility focus states/outlines
Remove redundant `& {}` wrapper around `-servicestudio-stroke` declaration,
which caused a duplicate `&__progress-path` selector warning.
|
BenOsodrac
requested changes
May 22, 2026
| /// | ||
| .has-accessible-features :focus { | ||
| @include a11y-default-outline; | ||
| box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); |
Contributor
There was a problem hiding this comment.
| --osui-semantics-orange-base: #{$token-primitives-orange-700}; /* future: --token-semantics-orange-base */ | ||
| --osui-semantics-orange-base: #{$token-primitives-orange-700}; /* future: --token-semantics-orange-base */ | ||
|
|
||
| /*! Legacy shape bridge — used by TS GetBorderRadiusValueFromShapeType() via --border-radius-<shape> */ |
Contributor
There was a problem hiding this comment.
We should later see what is that TS code and if it can be changed. Ideally we don't add these variables defined here
| width: 24px; | ||
| border-radius: $token-border-radius-full; | ||
| height: $token-border-size-050; | ||
| margin: 2px 0; // design-spec: 2px gap between lines |
Contributor
There was a problem hiding this comment.
We can remove the css for the menu-icon I think. On the iconLibrary initiative I changed that to be an actual icon, so no need to draw it with CSS anymore on this new theme
|
|
||
| // Primary: explicit darker background + border (same specificity, later → wins) | ||
| &-primary:hover { | ||
| background-color: #0b47b8; // token gap: $token-semantics-primary-hover missing from package |
Contributor
There was a problem hiding this comment.
In these kind of situations we could say to claude to create --osui- global variables. Like, --osui-color-primary-hover in this case.
And then we can decide if we leave them as OutSystemsUI globals variables or scale-up to become a design token
| } | ||
|
|
||
| // Reduced motion ---------------------------------------------------------------- | ||
| @media (prefers-reduced-motion: reduce) { |
Contributor
There was a problem hiding this comment.
This is good. I would maybe make it global for all transitions, not only button
| } | ||
|
|
||
| .osui-tooltip .osui-balloon--is-open { | ||
| animation: osui-tooltip-in 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards; |
|
|
||
| &__icon { | ||
| margin-inline-start: $token-scale-200; | ||
| transition: transform 200ms ease; |
| margin: 0; | ||
| padding: $token-scale-200 $token-scale-400; | ||
| text-decoration: none; | ||
| transition: background-color 150ms linear; |
Contributor
There was a problem hiding this comment.
missing transition tokens
| border-top: none; | ||
| margin: 0 $token-scale-025; | ||
| padding: $token-scale-200 $token-scale-300; | ||
| transition: background-color 150ms linear; |
| border-top: none; | ||
| margin: 0 $token-scale-025; | ||
| padding: $token-scale-200 $token-scale-300; | ||
| transition: background-color 150ms linear; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR is for updating the OutSystems UI components to match the proposed styles using the new theme https://jessicamendesos.github.io/jess-ui-review/proposed/showcase.html.
Sample application
What was done
Test Steps
Checklist