ROU-12714: Update secondary colors for Tag, User Avatar, Badge, and Icon Badge - #1255
OS-susmitabhowmik wants to merge 142 commits into
Conversation
- Copy compiled O11/ODC CSS to deprecated/ as migration reference baseline - Add specs/plan.md, specs/token-mapping.md, specs/implementation.md with full Make Great UI migration plan (Phases 0–3 + 2b component CSS API) - Add .claude/commands/scss-context.md slash command for AI context loading - Set defaultMode acceptEdits in .claude/settings.local.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…peline
- Add outsystems-design-tokens ^1.3.7 to devDependencies
- Add prebuild/predev scripts to run build.tokens before each build/dev,
generating src/scss/tokens/{_root,_variables,_utilities}.scss
- Gitignore src/scss/tokens/ (generated, not checked in)
- Import tokens/_variables in _setup-global-vars.scss so all $token-* SCSS
vars are available throughout the codebase
- Replace _root.scss: import tokens/_root for --token-* CSS custom properties,
rewrite app-level vars to reference --token-* with fallbacks
- Compiled output now contains 946 --token-* custom properties per platform
Note: _utilities.scss uses @use (new module system) which is incompatible with
the legacy @import codebase; utilities import is deferred to a future phase.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…vars Replace all --space-*, --font-size-*, --border-*, --shadow-* and SCSS get-background-color()/get-text-color()/get-border-color() calls with --token-* equivalents across all SCSS files (~150 files). Also removes deleted setup SCSS files (setup-color-vars, setup-border-vars, setup-global-typography-vars, _functions.scss), consolidates remaining SCSS maps into _setup-global-vars.scss, and adds $osui-space-token-vars map for utility class generation using token CSS var names. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…en defaults
For each osui-* pattern component, add a CSS API block of scoped custom
properties (--osui-{component}-{property}) at the root selector. These
default to semantic tokens (--token-bg-*, --token-text-*, --token-border-*)
rather than primitives, enabling per-component theme overrides via the DTE.
State variants (disabled, hover) now override the scoped var instead of
the property directly, so a single --osui-* override cascades correctly.
Components updated: accordion-item, animated-label, balloon, bottomsheet,
carousel, datepicker, dropdown, dropdown-serverside, dropdownserversideitem,
monthpicker, notification, overflowmenu, rangeslider, sectionindex, sidebar,
submenu, tabs, timepicker, tooltip
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…patterns, providers Upgrade remaining --token-primitives-* references to semantic tokens (--token-bg-*, --token-text-*, --token-border-*) across all in-scope SCSS. Widgets (Phase 2b CSS API + Phase 3): - Inputs/textareas: --osui-input-* API; bg→input-default, border→input-default/press, text→text-default, placeholder→text-subtlest, disabled states→input-disabled - Buttons: --osui-btn-* API; cancel/disabled states use semantic tokens - Checkbox, Radio, Switch: --osui-checkbox/radio/switch-* API; input semantic tokens - Dropdown, Button group, Table, Upload, List item, Popover, Bulk actions: semantic upgrades Layout (Phase 3 only): - Menu, header, login, menu-layout-side, menu-app-menu-links: surface/text semantics Patterns (remaining primitives → semantic): - AccordionItem, AnimatedLabel, BottomSheet, Dropdown, RangeSlider, Rating, SectionIndex, Submenu, Tabs, Tooltip, ProgressBar: disabled/text/border semantics Providers (conservative): - Flatpickr (shared, monthpicker, timepicker), VirtualSelect: input bg, borders, hover states, disabled states, inverse text Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ining SCSS Replace all --token-primitives-* with semantic tokens across 04-patterns/, 03-widgets/, 02-layout/, 01-foundations/, 00-abstract/, 05-useful/, 07-keyframes/, 08-servicestudio-preview/, and OSFramework pattern SCSS. Mapping applied: - primitives-base-white (bg/border) → token-bg-surface-default - primitives-base-white (color) → token-text-inverse - primitives-neutral-1200/900 (text) → token-text-default - primitives-neutral-800 (text) → token-text-subtlest - primitives-neutral-600/500 (disabled text) → token-text-disabled - primitives-neutral-400 (border) → token-border-default - primitives-neutral-500/600 (input border) → token-border-input-default - primitives-neutral-500 (bg) → token-bg-neutral-base-default - primitives-neutral-400 (hover bg) → token-bg-neutral-subtle-press Kept as primitives (no semantic equivalent): neutral-700 (#777), neutral-300 (#e0e0e0) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-accordion-item-active-indicator-color and --osui-accordion-item-icon-color vars to the CSS API block and wired all direct token references to go through them. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-animated-label-focus-border-color to the CSS API block and wired the input focus border-bottom to go through it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-carousel-arrow-icon-color and --osui-carousel-pagination-active-color to the CSS API block and wired arrow SVG fill and pagination active background through them. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-overflow-menu-background and --osui-overflow-menu-shadow to the CSS API block and wired them into the __balloon scope by overriding the corresponding balloon vars. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-popover-shadow to the CSS API block and wired box-shadow through it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-radio-checked-color to the CSS API block and wired the checked border color through it in both the normal and not-valid states. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-section-index-item-active-color and --osui-section-index-active-indicator-color to the CSS API block and wired active state color, hover color, and active indicator background through them. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-sidebar-color to the CSS API block and wired it via a new color property on the root selector. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-submenu-header-color and --osui-submenu-active-border-color to the CSS API block and wired all active-state borders and header item colors through them. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-switch-checked-track-color and --osui-switch-thumb-color to the CSS API block. Wired checked track background/border through the checked-track-color var and made thumb background-color explicit via the thumb-color var. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Added --osui-tabs-indicator-color to the CSS API block and wired the header indicator background and Service Studio preview active indicator through it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Card: background, border-color, border-width, border-radius, padding - Alert: background (per variant), color, border-radius, padding - FeedbackMessage: background (per variant), color, border-radius - Table: border-color, border-radius, header/cell/hover/stripe/selected backgrounds, header-color, sorted-color; fixes hardcoded hover bg - ListItem: border-color, background, hover-background, selected-background - Popup: background, border-radius, shadow, padding - ChatMessage: message/sent backgrounds, sent color, border-radius; fixes hardcoded #4263eb sent-bubble color with --osui-chat-message-sent-background - Wizard: icon-background, icon-border-color, icon-color, label-color, active-color, past-background, past-color, connector-color; full state wiring - Pagination: button-background, button-border-color, button-color, button-hover-background, active-color; fixes hardcoded rgba(21,24,26,0.04) - FloatingActions: button-background, button-color, button-shadow, item-background, item-color; hover wired via var overrides Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
BottomBarItem: background, border-color, item-color, item-active-color Breadcrumbs: item-color, separator-color Timeline: line-color, icon-color, text-color Section: title-color, title-border-color CardItem: title-color, text-color ListItemContent: title-color, text-color BlankSlate: description-color, icon-color Tag: color, primary-color, on-light-color UserAvatar: color, primary-color, on-light-color StackedCards: background, overlay-color, overlay-top/right/left-background ActionSheet: background, cancel-color, overlay-background InputWithIcon: icon-color, icon-hover-color MasterDetail: background, border-color, border-radius Badge: color, primary-color, on-light-color Separator: color ProviderLoginButton: background, border-color, color Rating: disabled-color, disabled-empty-color Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Wire btn primary/success/error variants through dedicated CSS API vars
(--osui-btn-{variant}-background/border-color/color). Wire checkbox
:checked state through --osui-checkbox-checked-color. Wire input
:focus and .not-valid states through --osui-input-focus-border-color
and --osui-input-error-border-color respectively, covering all
contexts (normal, layout-native, a11y).
Hardcoded hex audit: all remaining hits are in vendor _lib files,
SCSS color-palette maps, or out-of-scope icon/deprecated files — no
component SCSS changes required.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Phase 8 defines moving all pattern and provider SCSS from src/scripts/ into src/scss/04-patterns/ using a named-folder-per-pattern structure with provider/ subfolders. Covers the four change surfaces (pattern files, provider files, entry points, gulp specs) and flags the shared _flatpickr_lib.scss decision. Phase 9 defines the CSS API reference doc (docs/css-api-reference.md) — format spec, section structure, and semi-automatic generation approach from the existing // ─── Component CSS API blocks. Also marks Phases 4–7 complete in plan.md and aligns Phase 7 acceptance criteria with what was actually implemented (btn-error not btn-danger; --osui-checkbox-checked-color unified var). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…atterns/ Moves all 43 SCSS files from src/scripts/ (co-located with TypeScript) into src/scss/04-patterns/ with a named-folder-per-pattern structure. Provider files get a provider/ subfolder inside their pattern's folder. Change surfaces: - 43 SCSS files moved (35 pattern + 8 provider) via git mv - 4 internal @import paths updated (Dropdown, DatePicker, TimePicker, MonthPicker) - 28 gulp/ProjectSpecs/Patterns/*.js scss paths updated - gulp/ProjectSpecs/ScssStructure/Providers.js paths updated - O11.OutSystemsUI.scss and ODC.OutSystemsUI.scss regenerated (no ../scripts/ refs) Build verified: npm run build passes with zero errors. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds docs/css-api-reference.md — a complete reference for all 223 --osui-* custom properties across 55 components, organized by section: Widgets, Patterns (Adaptive / Content / Interaction / Navigation / Numbers / Utilities). Each entry lists the property, its default token value, and any notes (e.g. variant group annotations from the SCSS source). Generated by scanning all // ─── Component CSS API blocks in src/scss/. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…erties in token references
Documents the strategy for replacing `var(--token-*)` calls with `$token-*` SCSS variables
(with #{} interpolation where required for CSS custom property declarations).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
After Step A replaces all var(--token-*) with $token-* SCSS variables (which include full fallback chains), the generated _root.scss :root block is no longer needed for default rendering. Step B removes the @import from _root.scss and converts the bare --color-focus-inner reference. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… :root token import
Step A: 1,479 replacements across 93 files —
- Regular CSS properties: var(--token-foo) → $token-foo
- Custom property declarations: --osui-*: var(--token-foo) → --osui-*: #{$token-foo}
- All files in src/scss/02-layout/, 03-widgets/, 04-patterns/ (excluding _lib.scss vendors)
Step B: Remove @import '../tokens/root' from src/scss/01-foundations/_root.scss.
Every token reference now carries a full fallback chain in the compiled output,
so the :root custom property block is no longer needed for default rendering.
DTE theming still works — --token-* vars override the compiled-in fallbacks.
Also converts --color-focus-inner and app-level vars to #{$token-*} interpolation.
Bridge: $token-backdrop defined in _setup-global-vars.scss (token not yet in
design-token package; wrap in var(--token-backdrop, rgba(0,0,0,0.25)) so it
still functions as a theming hook).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The initial commit only covered 02-layout/, 03-widgets/, 04-patterns/ but removing _root.scss's @import '../tokens/root' also broke files outside that scope that still used bare var(--token-*) with no fallbacks. This commit converts the remaining 43 files across: - 00-abstract/_mixins.scss — mixin body + parameter default - 01-foundations/_html-elements-*.scss, _resets.scss, _icon-library-*.scss - 05-useful/**/*.scss — including string-map patterns in border-radius, border-size, shadow, typography, space-margin/padding (maps changed from CSS var name strings → $token-* SCSS variables; var(#{...}) → #{...}) - 04-patterns/01-adaptive/_columns.scss — same map-based pattern - 07-keyframes/_pull-to-refresh.scss - 08-servicestudio-preview/ — 7 -servicestudio-* vendor property references - 10-deprecated/ — 21 deprecated files still compiled into the bundle Also fixes _setup-global-vars.scss $osui-space-token-vars map values (strings → SCSS variables) which drives margin/padding/columns utilities. Result: zero bare var(--token-*) without fallbacks in compiled dist. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* chore: add Cursor MCP configuration for Figma * Align Button Group widget with Figma * Remove Button Group native header styling and update CSS API reference
#1222) * ROU-12978: Rebrand Storybook with custom docs pages and manager chrome. Replace Introduction/inline MDX with React doc pages (Welcome, Getting Started, Component Library, CSS Architecture, Theme Editor) and an interactive CSS API Reference fed by the generated manifest, while aligning manager sidebar, appearance sync, and sticky doc navigation with the new layout. Co-authored-by: Cursor <cursoragent@cursor.com> * ROU-12978: Pin Storybook to 10.5.9 for CI npm install. Without a committed lockfile, npm i on Chromatic resolves ^10.4.1 to 10.5.10, which is not yet available on the internal Azure Artifacts feed. Co-authored-by: Cursor <cursoragent@cursor.com> * ROU-12978: Polish Storybook docs UX and dark-mode styling. Improve CSS API Reference layout, Theme Editor controls, Getting Started illustrations, sidebar spacing, and dark-mode fixes across docs pages. Co-authored-by: Cursor <cursoragent@cursor.com> * ROU-12978: Add Design system token docs and reorganize Storybook sidebar. Introduce generated token reference pages (colours, type, spacing, borders, shape, elevation, transitions), group them with CSS Architecture, API Reference, and Theme Editor under Design system, and align docs chrome, dark mode, and cross-page links. Co-authored-by: Cursor <cursoragent@cursor.com> * ROU-12978: Remove void-operator tick reads flagged by SonarCloud. The Theme Editor memos read an external override store and used 'void changeTick' to mark the invalidation tick as used. stories/ is not covered by the react-hooks lint, so the deps arrays alone suffice. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * ROU-12978: Reduce cognitive complexity in Storybook doc generators. SonarCloud flagged four functions over the 15 threshold: - parseSpacingUtilities (32) -> extracted per-kind class matchers + a shared look-ahead scale finder - generateColors classifier (47) -> split into per-category collectors with shared entry builders and an early-return dispatch - parseTypographyMaps (23) -> extracted map-prop parsing, part resolution, and variant naming helpers - extract in generate-css-api-reference (26) -> extracted interpolation scanner and --osui-* declaration parser Verified with eslint-plugin-sonarjs (all now <= 15) and by regenerating both outputs: token-data and css-api manifest are byte-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * update sonarcloud exclusions * fix dinamic images --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Bernardo Cardoso <bernardo.cardoso@outsystems.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
) * ROU-13013: Logical box-model properties (start/end, inline/block) Move padding, margin and border from physical sides to logical ones, and delete the hand-written `.is-rtl` rules that existed only to restate a physical side. Converted, 681 declarations across 92 files: - padding/margin sides -> *-inline-start / -end, *-block-start / -end - border sides -> border-inline-* / border-block-* - inline-asymmetric border-radius -> logical corners - padding/margin shorthands -> padding-block / padding-inline - left/right -> inset-inline-*, text-align: left|right -> start|end Deleted 175 `.is-rtl` declarations and pruned 205 rules they left empty; 51 files carrying `.is-rtl` are down to 24. Also: - $osui-box-sides became a physical-name -> logical-side map, so the .margin-left-s / .padding-top-m / .border-left-s utility classes keep their public names and emit logical properties. - Card Sectioned's four-value shorthand custom properties were split into -padding-block / -padding-inline pairs, which also fixes a missing interpolation that had been voiding the image padding. - --os-safe-area-inline-start / -inline-end added and swapped under .is-rtl; env() is physical and cannot be expressed logically. - --osui-sidebar-padding-x / -y renamed to -inline / -block. - [align='left'|'right'] resolve through text-align: start|end. - Accordion Item: dropped the hardcoded `direction: ltr` on the title, which kept the row LTR while its content mirrored. - Carousel (ODC): swap the arrow glyphs under .splide--rtl. Splide flips the buttons but `content` does not follow, so both arrows pointed inward in RTL. Left physical on purpose, each with a comment: transform / transform-origin and anything paired with a translateX (a logical inset would flip the anchor while the transform kept its direction), positional top/bottom, float, env() safe areas, -servicestudio-*, vendor baselines, and the Flatpickr calendar, which the vendor pins to `direction: ltr`. Storybook: the vendored platform shim was missing the author-level `direction: rtl` the running platform provides, so the RTL toggle set `dir` and `is-rtl` but OUI's own `body { direction: ltr }` reset won and nothing mirrored. Added to the shim only; no OUI SCSS involved. Verified by compiling both bundles before and after and comparing with a normaliser that resolves logical properties back to physical LTR: zero value changes on ODC and O11. Mirroring, the accordion title and the carousel arrows were then measured in headless Chrome against a running Storybook in both directions. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * ROU-13013: Leave the safe-area code alone Reverts the `--os-safe-area-inline-start` / `-inline-end` aliases and puts every safe-area declaration back exactly as the base branch has it. `env()` is physical and the existing code already handles that correctly, so there was nothing to fix here. Reverted: - the two aliases and their `.is-rtl` swap in _root.scss; - 44 declarations across 14 files, back to their physical property AND their physical var — a logical property reading a physical inset is the same mismatch as pairing one with a translateX: the side flips in RTL, the value does not. This includes the block-axis ones reading --os-safe-area-top / -bottom and the four-value shorthand in _login.scss; - the `.is-rtl` sticky rule in _sectionindex.scss, which anchors off --os-safe-area-right and is therefore still load-bearing. Verified against the base branch: safe-area declarations are now identical to it line for line, and the normalised LTR comparison drops from 103 to 59 differences on ODC (99 to 55 on O11) — the 44 alias renames, gone. What remains is the card-sectioned split, the sidebar rename, the carousel arrow rules and the accordion title pin removal. Docs updated: plan-part-five.md §6.4 and D5 now record safe areas as out of scope, and .claude/rules/scss.md lists them under "still physical, on purpose". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * revert change on feedbackMessage * fix dropdown-search/tags arrow * fix no ui properties * fix dropdown arrow --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Align Alert pattern with Figma: subtle default fills and vivid modifier - Switch alert default backgrounds to subtle semantic fills, add an accent border, and introduce a dedicated `--osui-alert-icon-color` API variable. - Add `.vivid` modifier to retain the previous solid-fill look. - Refine alert icon/message spacing and message typography. - Update Storybook alert stories with a Vivid control and render all default + vivid variants. - Regenerate the CSS API manifest. * Center the Alert pattern icon vertically
* Added fixed light and dark text color and apply to some components * ci: retrigger Chromatic after base branch change * Accepted changes from review
* ROU-13019: Update tooltip color * Snapshot the open tooltip in Chromatic * Align tooltip padding with Figma * Exclude CSS API manifest file from SonarCloud * remove formatting changes
* fix shadow var * remove unnecessary ie11 rule * fix scss warning * add tokens utilities to bundle * add new file to sonarcloud ingore --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
* Fixed padding for unselected dropdown * Restore lib file and apply overrides
* Applied new theme rules to Accordion * Addressed review requested changes
* ROU-13017: Implement border-radius shape tier slots and `.shape-*` utilities
- Replace the legacy `--border-radius-{none,soft,softer,rounded}` theme contract with tier slots `--border-radius-{2xs,xs,sm,md,lg,xl,2xl}` and add `.shape-soft`, `.shape-round`, `.shape-rectangular` profile utilities.
- Map component CSS APIs to the appropriate tier (controls → xs, surfaces → sm, cards/accordion → xl, dropdown popups → lg, etc.) using `$token-shape-soft-*` fallbacks.
- Handle portaled popups (Balloon, BottomSheet, OverflowMenu, Flatpickr, VirtualSelect) by declaring tier slots on detached roots and remapping legacy shape knobs locally without TS changes.
- Retire `--border-radius-softer`; keep legacy `--border-radius-none`, `--border-radius-soft`, and `--border-radius-rounded` for existing TS shape APIs.
- Add ADR-0010 documenting the tier-slot architecture, portaled-popup decisions, and known VirtualSelect gap.
- Update `.claude/rules/scss.md` to reflect the new radius theme-layer vocabulary.
* ROU-13017: Add ADR rationale and align Tabs header border-radius with shape tier slots
- Document the rationale for each resolved border-radius decision in ADR-0010.
- Update `--osui-tabs-header-item-border-radius` to use `var(--border-radius-lg)` with `$token-shape-soft-lg` fallback.
- Regenerate the CSS API manifest to reflect the new Tabs radius chain.
…html (#1254) * Adding font Inter font-family * Using a scss variable for font-family definition
…reference class to html element (#1252) * Add SetDarkMode client action * Rename client action to SetDarkTheme * Rename dark theme class to os-dark-theme and move os-dark-mode to the html element * Rename dark theme class and establish mode/theme distinction
BenOsodrac
left a comment
There was a problem hiding this comment.
If you agree, please use the same logic suggested for the tag, avatar and badge
| &-secondary { | ||
| --osui-tag-color: var(--color-primary); | ||
| background-color: variables.$token-bg-neutral-base-default; | ||
| color: variables.$token-text-primary; |
There was a problem hiding this comment.
I think here and on all other changes we should override --osui-tag-color instead of color property. Makes sense?
There was a problem hiding this comment.
That makes sense - I addressed this and your other suggestion in https://github.com/OutSystems/outsystems-ui/pull/1261/changes
| background-color: variables.$token-bg-neutral-base-default; | ||
| color: var(--osui-tag-on-light-color); | ||
| background-color: variables.$token-bg-neutral-subtle-default; | ||
| color: variables.$token-text-primary; |
There was a problem hiding this comment.
Here would be --osui-tag-on-light-color: #{variables.$token-text-primary}, instead of color attribute
Wiz Scan Summary
To detect these findings earlier in the dev lifecycle, try the Wiz Code extension for VS Code, JetBrains, or Visual Studio. Pull Request Developer GuidanceQuestions? See the Wiz FAQ. Please contact the Security Office if you encounter issues with Wiz pull request scanning. |
|
🖼️ Storybook: Chromatic UI tests result: ✅ Passed
|
|
Closing this PR as it contains unrelated changes and was replaced by #1261 |



This PR is for updating the secondary colors for the Tag, User Avatar, Badge, and Icon Badge widgets to match the designs in Figma.
Note: The color and background color for the Icon Badge is inherited from the Badge.
Sample page
Checklist