ROU-12872: Merge new theme on dev - #1251
Merged
Merged
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>
SonarCloud flagged Math.random() in stories/_helpers/osui.ts as a PRNG in a security context. The ids are only DOM handles for the story harness, so there is no real exposure, but crypto.getRandomValues() is a drop-in here and removes the finding rather than annotating it. Note src/scripts/OSFramework/OSUI/Helper/Dom.ts:401 has the same Math.random() call. It is pre-existing library code, outside this PR's diff, and untouched.
SonarCloud flagged `npm i` in chromatic.yaml for running lifecycle scripts during installation. Worth acting on here specifically: this is the only pull_request-triggered workflow that installs directly in the job, so it installs the dependency manifest of the PR under review. Verified no install script is needed to build — `npm i --ignore-scripts` then `npm run build` and `npm run build-storybook` both succeed and emit dist/ bytes identical to a normal install. npm 11 already withholds unapproved install scripts; the flag makes that explicit and npm-version-independent.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
This reverts f8fe728. Restoring .npmrc broke the required build check: npm error code ETARGET npm error notarget No matching version found for outsystems-design-tokens@^2.1.0 with a date before 8/28/2026 min-release-age=7 blocks outsystems-design-tokens@2.1.0, published 2026-09-02. My earlier local `npm install --dry-run` passed only because an untracked package-lock.json exists on this machine, so npm never re-resolved from the registry; CI has no lockfile (gitignored) and resolves fresh. Reproduced the failure locally in a clean directory. min-release-age-exclude is not a supported npm 11.16 config ("Unknown project config"), so the policy cannot be kept with a per-package exemption. And this is not a one-off: with no lockfile, every outsystems-design-tokens release breaks this repo's CI for 7 days — a branch whose whole purpose is tracking those tokens cannot carry that setting. CLAUDE.md now records the real constraint instead of my earlier wrong reason: landing on dev needs either a committed lockfile (which would also close the remaining SonarCloud "dependencies should be locked" alert) or dev's .npmrc dropped.
generate-css-api-reference.mjs:247 — `walk(scssRoot).sort()` used the type-dependent default comparator (Reliability, High). Replaced with an explicit compareCodeUnits(). Deliberately NOT localeCompare: this generator writes a committed artifact (css-api-manifest.ts + CssApiReference.mdx), so file order must not vary with the machine's locale. Verified the regenerated output is identical apart from its generatedAt timestamp. DropdownServerSide.stories.ts:101-102 — functions nested more than 5 levels deep (Maintainability, High), from render → renderPattern → forEach → addEventListener → requestAnimationFrame → filter/map. Extracted selectedLabels() and mirrorSelectionToTrigger() to module scope; deepest chain is now 4. Also hoisted the 'Choose a fruit' placeholder to a PLACEHOLDER const so the markup and the click handler can no longer drift apart. Storybook builds; npm run lint clean.
Contributor
Author
|
Sonarcloud is a false-positive. Files were already added to list ignore, but only take effect next run from dev after merge. |
BenOsodrac
marked this pull request as ready for review
September 4, 2026 13:33
* 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
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
One or more issues must be addressed before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR merges the token-based New Theme 3.0 across O11/ODC, expands Storybook documentation, and adds static widget coverage.
Changes:
- Migrates foundations, layouts, widgets, patterns, and providers to design tokens.
- Updates build tooling, dark mode, classic-theme snapshots, and Storybook configuration.
- Adds foundation pages and platform-widget stories.
File summaries
| File | Description |
|---|---|
| tsconfig.json | Updated as part of this pull request. |
| stories/widgets/Upload.stories.ts | Updated as part of this pull request. |
| stories/widgets/TextArea.stories.ts | Updated as part of this pull request. |
| stories/widgets/Text.stories.ts | Updated as part of this pull request. |
| stories/widgets/Table.stories.ts | Updated as part of this pull request. |
| stories/widgets/Switch.stories.ts | Updated as part of this pull request. |
| stories/widgets/RadioGroup.stories.ts | Updated as part of this pull request. |
| stories/widgets/Popup.stories.ts | Updated as part of this pull request. |
| stories/widgets/Link.stories.ts | Updated as part of this pull request. |
| stories/widgets/Label.stories.ts | Updated as part of this pull request. |
| stories/widgets/Input.stories.ts | Updated as part of this pull request. |
| stories/widgets/Image.stories.ts | Updated as part of this pull request. |
| stories/widgets/Form.stories.ts | Updated as part of this pull request. |
| stories/widgets/FeedbackMessage.stories.ts | Updated as part of this pull request. |
| stories/widgets/Checkbox.stories.ts | Updated as part of this pull request. |
| stories/widgets/Button.stories.ts | Updated as part of this pull request. |
| stories/Welcome.mdx | Updated as part of this pull request. |
| stories/Video.stories.ts | Updated as part of this pull request. |
| stories/TouchEvents.stories.ts | Updated as part of this pull request. |
| stories/TimePicker.stories.ts | Updated as part of this pull request. |
| stories/ThemeEditor.mdx | Updated as part of this pull request. |
| stories/Table.stories.ts | Updated as part of this pull request. |
| stories/SwipeEvents.stories.ts | Updated as part of this pull request. |
| stories/Submenu.stories.ts | Updated as part of this pull request. |
| stories/Search.stories.ts | Updated as part of this pull request. |
| stories/ScrollableArea.stories.ts | Updated as part of this pull request. |
| stories/Rating.stories.ts | Updated as part of this pull request. |
| stories/Notification.stories.ts | Updated as part of this pull request. |
| stories/MonthPicker.stories.ts | Updated as part of this pull request. |
| stories/MarginContainer.stories.ts | Updated as part of this pull request. |
| stories/ListItemContent.stories.ts | Updated as part of this pull request. |
| stories/InlineSvg.stories.ts | Updated as part of this pull request. |
| stories/IconBadge.stories.ts | Updated as part of this pull request. |
| stories/GettingStarted.mdx | Updated as part of this pull request. |
| stories/FoundationsTypography.mdx | Updated as part of this pull request. |
| stories/FoundationsTransitions.mdx | Updated as part of this pull request. |
| stories/FoundationsSpacing.mdx | Updated as part of this pull request. |
| stories/FoundationsShape.mdx | Updated as part of this pull request. |
| stories/FoundationsElevation.mdx | Updated as part of this pull request. |
| stories/FoundationsColors.mdx | Updated as part of this pull request. |
| stories/FoundationsBorders.mdx | Updated as part of this pull request. |
| stories/FlipContent.stories.ts | Updated as part of this pull request. |
| stories/CssArchitecture.mdx | Updated as part of this pull request. |
| stories/CssApiReference.mdx | Updated as part of this pull request. |
| stories/ComponentLibrary.mdx | Updated as part of this pull request. |
| stories/CenterContent.stories.ts | Updated as part of this pull request. |
| stories/ButtonLoading.stories.ts | Updated as part of this pull request. |
| stories/Breadcrumbs.stories.ts | Updated as part of this pull request. |
| stories/BottomSheet.stories.ts | Updated as part of this pull request. |
| stories/BlankSlate.stories.ts | Updated as part of this pull request. |
| stories/_helpers/token-data/shape.ts | Updated as part of this pull request. |
| stories/_helpers/storybook-appearance.js | Updated as part of this pull request. |
| stories/_helpers/foundations/VarStack.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/UtilityTable.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/TransitionsPage.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/TokenThemeToggle.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/FoundationsShell.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/ElevationPage.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/CopyButton.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/ColorTokenValue.tsx | Updated as part of this pull request. |
| stories/_helpers/foundations/BordersPage.tsx | Updated as part of this pull request. |
| stories/_helpers/DocsNote.tsx | Updated as part of this pull request. |
| stories/_helpers/ComponentLibraryPage.tsx | Updated as part of this pull request. |
| src/scss/10-deprecated/_video-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_section-index-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_progress-circle-fraction-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_progress-circle-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_progress-bar-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_horizontal-scroll-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_gallery-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_flip-content-deprecated.scss | Updated as part of this pull request. |
| src/scss/10-deprecated/_button-loading-deprecated.scss | Updated as part of this pull request. |
| src/scss/08-servicestudio-preview/deprecated-preview.scss | Updated as part of this pull request. |
| src/scss/08-servicestudio-preview/_servicestudiopreview.scss | Updated as part of this pull request. |
| src/scss/08-servicestudio-preview/_placeholder-empty-odc.scss | Updated as part of this pull request. |
| src/scss/08-servicestudio-preview/_placeholder-empty-o11.scss | Updated as part of this pull request. |
| src/scss/07-keyframes/_pull-to-refresh.scss | Updated as part of this pull request. |
| src/scss/05-useful/_typography.scss | Updated as part of this pull request. |
| src/scss/05-useful/_text.scss | Updated as part of this pull request. |
| src/scss/05-useful/_space-padding.scss | Updated as part of this pull request. |
| src/scss/05-useful/_space-margin.scss | Updated as part of this pull request. |
| src/scss/05-useful/_shadow.scss | Updated as part of this pull request. |
| src/scss/05-useful/_positioning-absolute.scss | Updated as part of this pull request. |
| src/scss/05-useful/_miscellaneous.scss | Updated as part of this pull request. |
| src/scss/05-useful/_images.scss | Updated as part of this pull request. |
| src/scss/05-useful/_colors-semantic.scss | Updated as part of this pull request. |
| src/scss/05-useful/_colors-palette.scss | Updated as part of this pull request. |
| src/scss/05-useful/_colors-others.scss | Updated as part of this pull request. |
| src/scss/05-useful/_colors-neutral.scss | Updated as part of this pull request. |
| src/scss/05-useful/_colors-brand.scss | Updated as part of this pull request. |
| src/scss/05-useful/_border-size.scss | Updated as part of this pull request. |
| src/scss/05-useful/_border-color.scss | Updated as part of this pull request. |
| src/scss/05-useful/_a11y.scss | Updated as part of this pull request. |
| src/scss/04-patterns/06-utilities/_separator.scss | Updated as part of this pull request. |
| src/scss/04-patterns/06-utilities/_pull-to-refresh.scss | Updated as part of this pull request. |
| src/scss/04-patterns/06-utilities/_margin-container.scss | Updated as part of this pull request. |
| src/scss/04-patterns/06-utilities/_list-updating.scss | Updated as part of this pull request. |
| src/scss/04-patterns/05-numbers/progress/_progresscircle.scss | Updated as part of this pull request. |
| src/scss/04-patterns/05-numbers/_icon-badge.scss | Updated as part of this pull request. |
| src/scss/04-patterns/05-numbers/_counter.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/time-picker/provider/_flatpickr.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/search/_search.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/month-picker/_monthpicker.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/dropdown/_dropdown-search.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/balloon/_balloon.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/_scrollable-area.scss | Updated as part of this pull request. |
| src/scss/04-patterns/03-interaction/_rangeslider-odc.scss | Updated as part of this pull request. |
| src/scss/04-patterns/02-content/video/_video.scss | Updated as part of this pull request. |
| src/scss/04-patterns/02-content/flip-content/_flipcontent.scss | Updated as part of this pull request. |
| src/scss/04-patterns/02-content/_card.scss | Updated as part of this pull request. |
| src/scss/04-patterns/02-content/_card-item.scss | Updated as part of this pull request. |
| src/scss/04-patterns/02-content/_blank-slate.scss | Updated as part of this pull request. |
| src/scss/04-patterns/01-adaptive/gallery/_gallery.scss | Updated as part of this pull request. |
| src/scss/04-patterns/01-adaptive/_columns.scss | Updated as part of this pull request. |
| src/scss/03-widgets/_popup.scss | Updated as part of this pull request. |
| src/scss/03-widgets/_popover.scss | Updated as part of this pull request. |
| src/scss/03-widgets/_popover-odc.scss | Updated as part of this pull request. |
| src/scss/03-widgets/_bulk-actions.scss | Updated as part of this pull request. |
| src/scss/02-layout/_section.scss | Updated as part of this pull request. |
| src/scss/02-layout/_menu-header-logo.scss | Updated as part of this pull request. |
| src/scss/02-layout/_menu-app-login-info.scss | Updated as part of this pull request. |
| src/scss/02-layout/_ios-bounce.scss | Updated as part of this pull request. |
| src/scss/02-layout/_content.scss | Updated as part of this pull request. |
| src/scss/01-foundations/_html-elements-link.scss | Updated as part of this pull request. |
| src/scss/00-abstract/_setup-global-typography-vars.scss | Updated as part of this pull request. |
| src/scss/00-abstract/_setup-border-vars.scss | Updated as part of this pull request. |
| src/scss/00-abstract/_index.scss | Updated as part of this pull request. |
| src/scss/00-abstract/_functions.scss | Updated as part of this pull request. |
| src/scripts/Providers/OSUI/Timepicker/Flatpickr/scss/_flatpickr.scss | Updated as part of this pull request. |
| src/scripts/Providers/OSUI/Timepicker/Flatpickr/IFlatpickrTime.ts | Updated as part of this pull request. |
| src/scripts/Providers/OSUI/RangeSlider/NoUISlider/INoUiSlider.ts | Updated as part of this pull request. |
| src/scripts/Providers/OSUI/RangeSlider/NoUISlider/AbstractNoUiSliderConfig.ts | Updated as part of this pull request. |
| src/scripts/Providers/OSUI/Monthpicker/Flatpickr/scss/_flatpickr.scss | Updated as part of this pull request. |
| src/scripts/Providers/OSUI/Monthpicker/Flatpickr/IFlatpickrMonth.ts | Updated as part of this pull request. |
| src/scripts/Providers/OSUI/Datepicker/Flatpickr/IFlatpickr.ts | Updated as part of this pull request. |
| src/scripts/OutSystems/OSUI/Utils/Utilities.ts | Updated as part of this pull request. |
| src/scripts/OutSystems/OSUI/Utils/LayoutPrivateBodyCssVars.ts | Updated as part of this pull request. |
| src/scripts/OutSystems/OSUI/ErrorCodes.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/TouchEvents/ITouchEvents.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/SectionIndex/ISectionIndex.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/Search/ISearch.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/InlineSvg/IInlineSvg.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/Gallery/IGallery.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/Dropdown/scss/_dropdown.scss | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/Dropdown/scss/_dropdown-tags.scss | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/Dropdown/scss/_dropdown-search.scss | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Pattern/Accordion/scss/_accordion.scss | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Interface/IFloatable.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Helper/Language.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/GlobalEnum.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Feature/IFeature.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts | Updated as part of this pull request. |
| src/scripts/OSFramework/OSUI/Event/DOMEvents/Observers/MutationObserver/Lang/LangObserver.ts | Updated as part of this pull request. |
| src/scripts/Global.d.ts | Updated as part of this pull request. |
| sonar-project.properties | Updated as part of this pull request. |
| gulp/Tasks/ScssTranspile.js | Updated as part of this pull request. |
| gulp/Tasks/CreateScssFile.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/ScssStructure/UsefullClasses.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/ScssStructure/SetupVariables.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/ScssStructure/Root.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/ScssStructure/Providers.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/ScssStructure/Patterns.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/ScssStructure/Functions&Mixins.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/ScssStructure/#All.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/WizardItem.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Wizard.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Video.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Tooltip.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/TimePicker.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Tabs.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Submenu.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Sidebar.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/SectionIndex.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Search.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Rating.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/RangeSlider.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Progress.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/OverflowMenu.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Notification.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/MonthPicker.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Gallery.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/FlipContent.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/DropdownServerSideItem.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/DropdownServerSide.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Dropdown.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/DatePicker.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Carousel.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/ButtonLoading.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/BottomSheet.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Balloon.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/AnimatedLabel.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/AccordionItem.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/Patterns/Accordion.js | Updated as part of this pull request. |
| gulp/ProjectSpecs/DefaultSpecs.js | Updated as part of this pull request. |
| docs-internal/adr/Readme.md | Updated as part of this pull request. |
| docs-internal/adr/ADR-0001-ios-remove-static-height.md | Updated as part of this pull request. |
| .vscode/settings.json | Updated as part of this pull request. |
| .storybook/Theme.js | Updated as part of this pull request. |
| .storybook/assets/sample.svg | Updated as part of this pull request. |
| .storybook/assets/placeholder-stack-3.svg | Updated as part of this pull request. |
| .storybook/assets/placeholder-stack-2.svg | Updated as part of this pull request. |
| .storybook/assets/placeholder-stack-1.svg | Updated as part of this pull request. |
| .storybook/assets/placeholder-card.svg | Updated as part of this pull request. |
| .storybook/assets/document.svg | Updated as part of this pull request. |
| .npmrc | Updated as part of this pull request. |
| .gitignore | Updated as part of this pull request. |
| .eslintignore | Updated as part of this pull request. |
| .cursor/mcp.json | Updated as part of this pull request. |
Review details
Suppressed comments (3)
.storybook/preview.ts:102
- This comment says
--color-focus-outeris a hardcoded yellow, but the declaration in_root.scssderives it from$token-semantics-primary-basewithcolor-mixand it remains a themeable role. The documentation is misleading when validating dark-theme behavior; describe the primary-token-derived wash instead.
src/scripts/OutSystems/OSUI/Utils/LayoutPrivateBodyCssVars.ts:84 - This newly added callback is registered by
_checkDarkModeStatusevery timeCssBodyVariables.Set()runs, andSet()runs again after orientation changes. Since the media-query listener is never removed, each rotation adds another callback; later system color-scheme changes repeat these class updates and retain the old closures. Register the query listener once or retain/remove the previous listener while keeping the initial match check.
src/scss/00-abstract/_setup-global-vars.scss:93 - This is the only semantic status entry mapped to a primitive even though the map documents semantic
basetokens and:rootmaps--color-warningfrom$token-semantics-warning-base..background-warning/.text-warningtherefore diverge from the warning role when that semantic token is themed; use the semantic warning base here.
- Files reviewed: 138/450 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
❌ The last analysis has failed. |
🖼️ Storybook: Chromatic UI tests result: ✅ Passed
|
OS-giulianasilva
approved these changes
Sep 11, 2026
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
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 merging the New Theme (3.0) into dev.
Checklist