TINY-12690: add skin with modern css enabled

[ztomaszyk]

Related Ticket: TINY-12690

Description of Changes:

• Added a new skin that enables CSS custom properties
• Updated the oxideUiSkinMap in Gruntfile.js to include the new skin

Pre-checks:

• Changelog entry added
• Tests have been added (if applicable)
• Branch prefixed with feature/, hotfix/or spike/

Review:

• Milestone set
• Docs ticket created (if applicable)

GitHub issues (if applicable):

Summary by CodeRabbit

• New Features
  • Introduced an experimental UI skin that enables CSS custom properties for enhanced theming flexibility.
  • Includes base typography updates (sans-serif body) and refined table rendering (collapsed borders).
  • Shadow DOM styling support included for consistent component theming.
  • Available via a new skin alias to simplify selection in builds and configurations.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Introduces a new experimental UI skin enabling CSS custom properties, adds related LESS files and imports, and updates the Grunt build skin map to include the new skin alias.

Changes

Cohort / File(s)	Summary
Experimental skin LESS assets modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/content.inline.less, .../experimental-css-custom-props-enabled/content.less, .../experimental-css-custom-props-enabled/skin.less, .../experimental-css-custom-props-enabled/skin.shadowdom.less	New skin with CSS custom properties enabled; adds theme imports (content-ui, theme, shadowdom), basic body font and table collapse styles, and sets @custom-properties-enabled: true.
Build configuration modules/tinymce/Gruntfile.js	Adds 'experimental-css-custom-props-enabled' to oxideUiSkinMap; minor comma adjustment for preceding entry.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[ztomaszyk]

• TINY-12690: add skin with modern css enabled #10544 👈 (View in Graphite)
• epic/TINY-12410

This stack of pull requests is managed by Graphite. Learn more about stacking.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (4)

modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/content.inline.less (1)

1-1: Enable CSS custom properties in content.inline.less
Define @custom-properties-enabled before importing the theme so that content builds emit CSS variables as expected.

• File: modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/content.inline.less
Apply:

-@import 'src/less/theme/content-ui';
+@custom-properties-enabled: true;
+@import 'src/less/theme/content-ui';

modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/content.less (2)

1-1: Place feature toggles before imports to avoid surprises.

Define the flag before the import so the theme can reliably switch to emitting CSS custom properties during compilation.

Apply this diff:

-@import 'src/less/theme/content-ui';
+@custom-properties-enabled: true;
+@import 'src/less/theme/content-ui';

---

3-9: Use theme font‐stack token in experimental skin

The theme already defines a global Less variable and CSS custom-property for the font stack:

• @font-stack in modules/oxide/src/less/theme/globals/global-variables.less
• --tox-private-font-stack (with fallback @font-stack) in modules/oxide/src/less/theme/globals/tinymce.less

Please update your skin’s content.less to use these tokens instead of hardcoding sans-serif.

• File: modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/content.less

 body {
-    font-family: sans-serif;
+    font-family: var(--tox-private-font-stack, @font-stack);
 }

 table {
   border-collapse: collapse;
 }

This ensures changes to the design system propagate across all skins.

modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/skin.less (1)

1-7: Move @custom-properties-enabled before the import for deterministic behavior.

Less variables are lazily evaluated but guards/mixins may consult flags during import resolution. Defining the toggle up-front avoids subtle ordering pitfalls.

Apply this diff:

-@import 'src/less/theme/theme';
-
-//
-// Place your variables here
-//
-
-@custom-properties-enabled: true;
+@custom-properties-enabled: true;
+@import 'src/less/theme/theme';
+
+//
+// Place your variables here
+//

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 267c1a4 and accd4f3.

📒 Files selected for processing (5)

• modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/content.inline.less (1 hunks)
• modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/content.less (1 hunks)
• modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/skin.less (1 hunks)
• modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/skin.shadowdom.less (1 hunks)
• modules/tinymce/Gruntfile.js (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)

• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: task-list-completed
• GitHub Check: Analyze (javascript)

🔇 Additional comments (2)

modules/oxide/src/less/skins/ui/experimental-css-custom-props-enabled/skin.shadowdom.less (1)

1-1: No changes needed: Shadow DOM theme doesn’t read the custom-properties flag
After inspecting modules/oxide/src/less/theme/shadowdom.less, it has no conditional logic based on @custom-properties-enabled. Adding

+@custom-properties-enabled: true;

before importing it in skin.shadowdom.less would have no effect today. We can leave the import as-is and revisit if the theme ever honours the flag.

modules/tinymce/Gruntfile.js (1)

34-36: Mapping addition looks correct and consistent with the build copy task.

The new alias will be picked up by copy:ui-skins (cwd uses the value, dest uses the key), so experimental-css-custom-props-enabled should be packaged to js/tinymce/skins/ui/experimental-css-custom-props-enabled.