Add add-chessboard-background and is-resizable mixins, refactor SCSS

[Kiarokh]

fix #3669

Summary by CodeRabbit

• New Features

  • Unified, reusable styling for resizable containers and chessboard backgrounds, improving consistency across examples and components (e.g., color picker, chip invalid state, text editor image placeholders).

• Style

  • Replaced ad‑hoc resize and background rules with mixin-based implementations for consistent visuals and resize affordances.
  • Standardized the chessboard pattern appearance where transparency or loading states are shown.

• Refactor

  • Consolidated duplicated CSS into shared mixins, simplifying example styles and reducing maintenance overhead.

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

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

Walkthrough

Introduces two Sass mixins (add-chessboard-background, is-resizable) in src/style/mixins.scss and refactors multiple component/example SCSS files to use them, replacing inline SVG backgrounds and manual resizable CSS. Removes various explicit sizing/border/pseudo-element hint rules and imports the mixins module where used.

Changes

Cohort / File(s)	Summary
New mixins src/style/mixins.scss	Adds mixins: add-chessboard-background (SVG chessboard background) and is-resizable(...) (configurable resizable container with constraints and hint).
Resizable via mixin (examples) src/components/action-bar/examples/_application.scss, src/components/ai-avatar/examples/ai-avatar-basic.scss, src/components/card/examples/card-resizable-container.scss, src/components/chart/examples/chart-resizable-container.scss, src/components/info-tile/examples/info-tile.scss, src/components/menu/examples/menu-surface-width.scss, src/components/text-editor/examples/text-editor-size.scss	Imports mixins and replaces manual resize/sizing/border/::after hint rules with @include mixins.is-resizable(...). Removes redundant properties.
Chessboard background via mixin src/components/chip/chip.scss, src/components/color-picker/color-picker.scss, src/components/notched-outline/examples/notched-outline-basic.scss, src/components/text-editor/prosemirror-adapter/plugins/image/view.scss	Replaces inline SVG/background-size or CSS var with @include mixins.add-chessboard-background(). Removes prior data-URI usage and related properties where applicable.

Sequence Diagram(s)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Create mixin for chessboard backgrounds (#3669)	✅
Create mixin for resizable containers (#3669)	✅
Replace existing inline SVG chessboard backgrounds with mixin across codebase (#3669)	❓	Several files updated, but completeness across “over a dozen” locations is not verifiable from this diff.
Standardize percent-encoding of inline SVG data URIs via centralization (#3669)	❓	Encoding appears centralized in the mixin, but not confirmed that all occurrences were migrated.

Assessment against linked issues: Out-of-scope changes

Possibly related PRs

• Refactor theming system to use centralized Lime Elements CSS variables #3624: Also edits src/style/mixins.scss to adjust default parameters in existing mixins; overlaps conceptually with this mixin-focused change.

Suggested labels

maintenance, visual design

Suggested reviewers

• adrianschmidt
• dorisenthecat
• LucyChyzhova

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chessboard-mixin

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3671/

[coderabbitai]

Actionable comments posted: 8

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 27531fc and e0b5080.

📒 Files selected for processing (12)

• src/components/action-bar/examples/_application.scss (1 hunks)
• src/components/ai-avatar/examples/ai-avatar-basic.scss (1 hunks)
• src/components/card/examples/card-resizable-container.scss (1 hunks)
• src/components/chart/examples/chart-resizable-container.scss (1 hunks)
• src/components/chip/chip.scss (1 hunks)
• src/components/color-picker/color-picker.scss (1 hunks)
• src/components/info-tile/examples/info-tile.scss (1 hunks)
• src/components/menu/examples/menu-surface-width.scss (2 hunks)
• src/components/notched-outline/examples/notched-outline-basic.scss (1 hunks)
• src/components/text-editor/examples/text-editor-size.scss (1 hunks)
• src/components/text-editor/prosemirror-adapter/plugins/image/view.scss (1 hunks)
• src/style/mixins.scss (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

src/components/**/*.scss

📄 CodeRabbit inference engine (.cursor/rules/css-class-names-in-components-using-shadow-dom.mdc)

Do not use BEM-style class names in CSS for components, as components use shadow-DOM.

Files:

• src/components/notched-outline/examples/notched-outline-basic.scss
• src/components/menu/examples/menu-surface-width.scss
• src/components/color-picker/color-picker.scss
• src/components/chip/chip.scss
• src/components/info-tile/examples/info-tile.scss
• src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
• src/components/action-bar/examples/_application.scss
• src/components/text-editor/examples/text-editor-size.scss
• src/components/ai-avatar/examples/ai-avatar-basic.scss
• src/components/card/examples/card-resizable-container.scss
• src/components/chart/examples/chart-resizable-container.scss

**/*.{tsx,scss}

⚙️ CodeRabbit configuration file

**/*.{tsx,scss}: Almost all our components use shadow-DOM. Therefore, we have no need of BEM-style class names in our CSS.

Files:

• src/components/notched-outline/examples/notched-outline-basic.scss
• src/components/menu/examples/menu-surface-width.scss
• src/components/color-picker/color-picker.scss
• src/components/chip/chip.scss
• src/components/info-tile/examples/info-tile.scss
• src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
• src/components/action-bar/examples/_application.scss
• src/components/text-editor/examples/text-editor-size.scss
• src/style/mixins.scss
• src/components/ai-avatar/examples/ai-avatar-basic.scss
• src/components/card/examples/card-resizable-container.scss
• src/components/chart/examples/chart-resizable-container.scss

🧠 Learnings (1)

📓 Common learnings

Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3658
File: src/components/profile-picture/profile-picture.scss:120-124
Timestamp: 2025-09-03T07:17:23.267Z
Learning: Issue #3666 in the lime-elements repository tracks the removal of a CSS hack in profile-picture component that overrides icon color via --limel-theme-on-surface-color, to be replaced with proper icon color support in limel-icon-button.

⏰ 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). (3)

• GitHub Check: Docs / Publish Docs
• GitHub Check: Build
• GitHub Check: Test

🔇 Additional comments (16)

src/components/text-editor/prosemirror-adapter/plugins/image/view.scss (1)

21-21: LGTM: mixin replaces inline SVG cleanly

Background is now standardized and easier to maintain.

src/components/notched-outline/examples/notched-outline-basic.scss (2)

1-1: LGTM: imports mixins correctly

Path looks correct relative to this file’s location.

---

9-9: LGTM: uses chessboard mixin

Keeps example concise and consistent.

src/components/chip/chip.scss (1)

152-152: LGTM: standardized invalid-state background

Mixin usage matches PR direction; background-color layering is preserved.

src/components/menu/examples/menu-surface-width.scss (1)

11-16: LGTM: resizable via mixin; clamp usage is sensible

Produces a 30rem ideal with 10rem–100% bounds for the demo.

src/components/info-tile/examples/info-tile.scss (2)

1-1: LGTM: mixins import

---

3-12: LGTM: resizable container standardized

Parameters are explicit and readable.

src/components/color-picker/color-picker.scss (1)

44-44: LGTM: replaces variable-based chessboard with mixin

Keeps z-index layering intact.

src/components/ai-avatar/examples/ai-avatar-basic.scss (2)

1-1: LGTM: mixins import

---

8-15: LGTM: concise resizable setup

Horizontal-only with small mins suits the demo.

src/components/action-bar/examples/_application.scss (2)

1-1: Mixins import path looks correct.
No issues.

---

12-16: Good migration to is-resizable; verify interaction with existing container rules.
Current block still has overflow: hidden; fixed height; and border set on Lines 5–7. If the intent was to drop these per the PR, confirm and remove to avoid clipping/hard sizing conflicting with the mixin.

src/components/text-editor/examples/text-editor-size.scss (2)

1-1: Mixins import added—LGTM.

---

4-8: Resizing moved to mixin—confirm scroll/overflow behavior.
Ensure the mixin sets overflow and box-sizing so long content remains usable within the container.

src/components/card/examples/card-resizable-container.scss (1)

1-1: Mixins import path is correct.

src/components/chart/examples/chart-resizable-container.scss (1)

1-1: Mixins import—LGTM.

[lime-opensource]

🎉 This PR is included in version 38.23.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀