Skip to content

ROU-12714: Update secondary colors for Tag, User Avatar, Badge, and Icon Badge - #1255

Closed
OS-susmitabhowmik wants to merge 142 commits into
devfrom
ROU-13021-review-secondary-colors
Closed

OS-susmitabhowmik wants to merge 142 commits into
devfrom
ROU-13021-review-secondary-colors

Conversation

@OS-susmitabhowmik

@OS-susmitabhowmik OS-susmitabhowmik commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

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

  • tested locally
  • documented the code
  • clean all warnings and errors of eslint
  • requires changes in OutSystems (if so, provide a module with changes)
  • requires new sample page in OutSystems (if so, provide a module with changes)

BenOsodrac and others added 30 commits April 16, 2026 14:26
- 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>
OS-giulianasilva and others added 15 commits August 28, 2026 16:21
* 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
@OS-susmitabhowmik
OS-susmitabhowmik requested a review from a team as a code owner September 9, 2026 21:03
@OS-susmitabhowmik OS-susmitabhowmik added enhancement New feature or request chore labels Sep 9, 2026

@BenOsodrac BenOsodrac left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think here and on all other changes we should override --osui-tag-color instead of color property. Makes sense?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here would be --osui-tag-on-light-color: #{variables.$token-text-primary}, instead of color attribute

@wiz-code-outsystems

Copy link
Copy Markdown

Wiz Scan Summary

Scanner Findings
Vulnerability Finding Vulnerabilities -
Data Finding Sensitive Data -
Secret Finding Secrets -
IaC Misconfiguration IaC Misconfigurations -
SAST Finding SAST Findings 7 Medium
Software Management Finding Software Management Findings -
Total 7 Medium

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try the Wiz Code extension for VS Code, JetBrains, or Visual Studio.

Pull Request Developer Guidance

Questions? See the Wiz FAQ.

Please contact the Security Office if you encounter issues with Wiz pull request scanning.

@OS-susmitabhowmik
OS-susmitabhowmik changed the base branch from ROU-12714 to dev September 11, 2026 17:42
@sonarqubecloud

Copy link
Copy Markdown

@github-actions

Copy link
Copy Markdown

🖼️ Storybook: Chromatic UI tests result: ✅ Passed

Metric Value
Visual changes 1
Errors 0
Storybook Preview
Chromatic Build View Results

@OS-susmitabhowmik

Copy link
Copy Markdown
Contributor Author

Closing this PR as it contains unrelated changes and was replaced by #1261

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants