@c8y/style/markdown-files/MANUAL-SYNC-FILES.md

Styles for Cumulocity IoT applications

# Files Requiring Manual SCSS/LESS Synchronization

This document lists files that cannot be automatically converted from SCSS to LESS due to complex syntax patterns.

## Files List

### `styles/core/buttons/_buttons.scss` / `_buttons.less`

**Reason**: Complex mixin calls with multiple parameters including CSS functions

**Issues**:
- `.button-size()` mixin calls have 6 parameters
- Contains `calc()` expressions as parameters
- Converter cannot reliably distinguish between:
  - Parameter separator commas (need →  semicolons for LESS)
  - calc() function commas (must remain commas)
  - Selector grouping commas (must remain commas)

**Manual sync required for**:
- Lines ~60: `.button-size(@btn-padding-vertical; calc(@btn-padding-horizontal * 2); ...)`
- Lines ~794-797: `.btn-lg { .button-size(...) }`
- Lines ~800-802: `.btn-sm { .button-size(...) }`
- Lines ~805-807: `.btn-xs { .button-size(...) }`

**Correct LESS syntax**:
```less
.button-size(@param1; @param2; @param3; @param4; @param5; @param6);
```

**Common mistakes**:
```less
// WRONG - mixed separators
.button-size(@param1, @param2; @param3, @param4; @param5; @param6);

// WRONG - all commas
.button-size(@param1, @param2, @param3, @param4, @param5, @param6);
```

## How to Maintain These Files

1. **Edit SCSS first**: Make changes to the `.scss` version
2. **Manually sync to LESS**: Copy changes to `.less` version, converting:
   - `$variable` → `@variable`
   - `@include mixin()` → `.mixin()`
   - `@mixin name()` → `.name()`
   - Mixin params: commas → semicolons
   - Keep calc/var/rgba commas as-is
3. **Test compilation**: Run `npm test --workspace=@c8y/style` to verify both compile

## Future Improvements

To make these files auto-convertible:
1. Simplify mixin calls - put all parameters on one line
2. Extract calc() to variables before passing to mixins
3. Reduce number of mixin parameters