@c8y/style 1023.14.76 → 1023.14.92

package/helper-scripts/scss-to-less-skip

@@ -0,0 +1,20 @@
+# Files to skip during automatic SCSS to LESS conversion
+# These files require manual synchronization due to complex syntax patterns
+
+# Complex mixin calls with calc()/var() - converter cannot reliably handle parameter separators
+styles/core/buttons/_buttons.scss
+
+# Transform mixins that output CSS functions - converter confuses CSS function commas with mixin parameter separators
+styles/mixins/_vendor-prefixes.scss
+
+# LESS guard syntax - converter incorrectly changes LESS guards to @if
+styles/components/application-and-system/_c8y-login.scss
+
+# math.div() - converter incorrectly changes LESS division to SCSS math.div()
+styles/components/data-input/_c8y-range.scss
+
+# Non-existent mixin - converter incorrectly re-adds removed mixin calls
+styles/components/data-input/_dtm-icon-selector.scss
+
+# Complex @if/@else conditional logic - converter has basic guard support but may need manual review
+styles/mixins/_shadows-helper.scss

package/{sync-scss-to-less.sh → helper-scripts/sync-scss-to-less.sh}

@@ -62,8 +62,8 @@ if [ $NEEDS_SYNC -eq 1 ]; then
   echo "==================================="
   echo ""
   echo "Options:"
-  echo "1. Semi-automated: ./convert-scss-to-less.sh --all"
-  echo "2. Single file:    ./convert-scss-to-less.sh path/to/file.scss"
+  echo "1. Semi-automated: ./helper-scripts/convert-scss-to-less.sh --all"
+  echo "2. Single file:    ./helper-scripts/convert-scss-to-less.sh path/to/file.scss"
   echo "3. Manually sync SCSS → LESS"
   echo "4. Ask Claude to sync for you"
   echo ""

package/helper-scripts/test-compile.sh

@@ -0,0 +1,71 @@
+#!/bin/bash
+
+# Quick LESS/SCSS compilation test
+# Tests that LESS and SCSS files compile without errors and produce similar output
+
+set -e
+
+cd "$(dirname "$0")"
+
+echo "==========================================="
+echo "Quick LESS/SCSS Compilation Test"
+echo "==========================================="
+echo ""
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Test LESS compilation
+printf "${YELLOW}Testing LESS compilation...${NC}\n"
+npx lessc main.less /tmp/test-main-less.css 2>/tmp/lessc-errors.log
+if [ $? -eq 0 ]; then
+  LESS_SIZE=$(wc -c < /tmp/test-main-less.css | tr -d ' ')
+  LESS_SIZE_MB=$(echo "scale=1; $LESS_SIZE / 1024 / 1024" | bc)
+  printf "${GREEN}✓ LESS compilation successful${NC} (${LESS_SIZE_MB}M)\n"
+else
+  printf "${RED}✗ LESS compilation failed${NC}\n"
+  cat /tmp/lessc-errors.log
+  exit 1
+fi
+
+# Test SCSS compilation
+printf "${YELLOW}Testing SCSS compilation...${NC}\n"
+npx sass main.scss /tmp/test-main-scss.css --no-source-map 2>/tmp/sass-errors.log
+if [ $? -eq 0 ]; then
+  SCSS_SIZE=$(wc -c < /tmp/test-main-scss.css | tr -d ' ')
+  SCSS_SIZE_MB=$(echo "scale=1; $SCSS_SIZE / 1024 / 1024" | bc)
+  printf "${GREEN}✓ SCSS compilation successful${NC} (${SCSS_SIZE_MB}M)\n"
+else
+  printf "${RED}✗ SCSS compilation failed${NC}\n"
+  cat /tmp/sass-errors.log
+  exit 1
+fi
+
+# Compare sizes (should be within 5%)
+SIZE_DIFF=$(echo "scale=2; ($LESS_SIZE - $SCSS_SIZE) / $SCSS_SIZE * 100" | bc)
+SIZE_DIFF_ABS=$(echo "$SIZE_DIFF" | tr -d '-')
+
+echo ""
+echo "==========================================="
+printf "${YELLOW}Comparison:${NC}\n"
+echo "  LESS: ${LESS_SIZE_MB}M"
+echo "  SCSS: ${SCSS_SIZE_MB}M"
+echo "  Difference: ${SIZE_DIFF}%"
+echo "  Difference absolute: ${SIZE_DIFF_ABS}%"
+
+if [ "$(echo "$SIZE_DIFF_ABS < 5" | bc -l)" -eq 1 ]; then
+  printf "${GREEN}✓ Output sizes match (within 5%%)${NC}\n"
+else
+  printf "${RED}✗ Warning: Output sizes differ by more than 5%%${NC}\n"
+fi
+
+echo "==========================================="
+echo ""
+echo "Detailed warnings/deprecations:"
+echo ""
+cat /tmp/lessc-errors.log | head -20
+echo ""
+echo "Full logs: /tmp/lessc-errors.log, /tmp/sass-errors.log"

package/markdown-files/MANUAL-SYNC-FILES.md

@@ -0,0 +1,56 @@
+# 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
+

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/style",
-  "version": "1023.14.76",
+  "version": "1023.14.92",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",
   "main": "main.less",
   "scripts": {
-    "test": "sh ./__tests__/generate-brandings.sh"
+    "test": "sh ./helper-scripts/test-compile.sh"
   },
   "keywords": [
     "Cumulocity",

package/styles/_login-app.less

@@ -0,0 +1,34 @@
+@import '_mixins.less';
+@import 'base/_normalize';
+@import 'base/_print';
+
+// TRANSITIONS & ANIMATION
+@import 'animations/_component-animations';
+@import 'animations/_animate';
+
+// CORE CSS
+@import 'base/_scaffolding';
+@import 'core/feedback/_alerts';
+@import 'core/feedback/_badges';
+@import 'core/buttons/_buttons';
+@import 'core/feedback/_close';
+@import 'core/buttons/_button-groups';
+@import 'components/status-feedback-and-notifications/_code';
+@import 'core/feedback/_tag';
+@import 'core/forms/_forms';
+@import 'core/forms/_c8y-switch';
+@import 'base/_type';
+@import 'layout/_grid';
+
+// @import 'layout/_grid';
+
+@import 'core/forms/_input-groups';
+@import 'components/application-and-system/_c8y-cookie-banner';
+
+@import 'icons/_c8y-glyphs';
+@import 'icons/_c8y-icons';
+@import 'icons/_dlt-c8y-icons';
+// @import 'icons/_dlt-c8y-icons-stroke';
+@import '_utilities.less';
+
+@import 'components/navigation-and-layout/action-bars/_app-switcher';

package/styles/_login-app.scss

@@ -13,7 +13,7 @@
 @import 'core/buttons/_buttons';
 @import 'core/feedback/_close';
 @import 'core/buttons/_button-groups';
-@import 'components/specialized/_code';
+@import 'components/status-feedback-and-notifications/_code';
 @import 'core/feedback/_tag';
 @import 'core/forms/_forms';
 @import 'core/forms/_c8y-switch';
@@ -23,7 +23,7 @@
 // @import 'layout/_grid';
 
 @import 'core/forms/_input-groups';
-@import 'components/specialized/_c8y-cookie-banner';
+@import 'components/application-and-system/_c8y-cookie-banner';
 
 @import 'icons/_c8y-glyphs';
 @import 'icons/_c8y-icons';

package/styles/_mixins.less

@@ -0,0 +1,47 @@
+// Utilities
+@import 'mixins/_icon-base.less';
+@import 'mixins/_hide-text.less';
+@import 'mixins/_opacity.less';
+@import 'mixins/_image.less';
+/* Remove after Codex launch. will be replaced by Tag */
+@import 'mixins/_labels.less';
+@import 'mixins/_tag.less';
+@import 'mixins/_reset-filter.less';
+@import 'mixins/_resize.less';
+@import 'mixins/_responsive-visibility.less';
+@import 'mixins/_size.less';
+@import 'mixins/_tab-focus.less';
+@import 'mixins/_reset-text.less';
+@import 'mixins/_text-emphasis.less';
+@import 'mixins/_text-overflow.less';
+@import 'mixins/_vendor-prefixes.less';
+@import 'mixins/_color-mixins.less';
+@import 'mixins/_animation.less';
+
+// Components
+@import 'mixins/_buttons.less';
+@import 'mixins/_alert-variant.less';
+@import 'mixins/_panels.less';
+@import 'mixins/_pagination.less';
+@import 'mixins/_list-group.less';
+@import 'mixins/_nav-divider.less';
+@import 'mixins/_forms.less';
+@import 'mixins/_progress-bar.less';
+@import 'mixins/_table-row.less';
+@import 'mixins/_c8y-scrollbar.less';
+
+// Skins
+@import 'mixins/_background-variant.less';
+@import 'mixins/_border-radius.less';
+@import 'mixins/_gradients.less';
+
+// Layout
+@import 'mixins/_clearfix.less';
+@import 'mixins/_center-block.less';
+@import 'mixins/_nav-vertical-align.less';
+@import 'mixins/_grid-framework.less';
+@import 'mixins/_grid.less';
+@import 'mixins/_hide-scrollbars.less';
+@import 'mixins/_shadows-helper.less';
+@import 'mixins/_element-queries.less';
+@import 'mixins/_create-grid.less';

package/styles/_utilities.less

@@ -0,0 +1,21 @@
+// Main utility classes
+
+@import 'utilities/_caret';
+@import 'utilities/_text-utils';
+@import 'utilities/_contextual-colors';
+@import 'utilities/_display';
+@import 'utilities/_quickfloats';
+@import 'utilities/_margins-paddings';
+// Using the grid - mixins/
+@import 'utilities/_flex-containers';
+@import 'utilities/_flex-items';
+
+@import 'utilities/_position';
+@import 'utilities/_overflows';
+@import 'utilities/_separators';
+@import 'utilities/_borders';
+@import 'utilities/_elevation';
+@import 'utilities/_icon-utils';
+@import 'utilities/_container-queries';
+@import 'utilities/_sizing';
+@import 'utilities/_c8y-utils';

package/styles/_utilities.scss

@@ -19,3 +19,4 @@
 @use 'utilities/_icon-utils';
 @use 'utilities/_container-queries';
 @use 'utilities/_sizing';
+@use 'utilities/_c8y-utils';

package/styles/animations/_animate.less

@@ -1,9 +1,22 @@
+
+/**
+ * Animate - Third-party animation library (animate.css v3.6.1)
+ *
+ * Note: This is a third-party library (animate.css by Daniel Eden).
+ *
+ * Intentionally hardcoded values:
+ * - Animation durations (0.35s, 0.5s, 1s, 2s): Animation timing
+ * - Transform distances (-30px, -15px, -4px, -10px, 10px, -1px, 1px, ±2000px): Animation movement
+ * - Perspective (300px): 3D transform depth
+ * - Percentages and unitless values: Animation keyframe positions and opacity
+ * - Cubic-bezier values: Custom easing functions
+ */
+
 @charset "UTF-8";
-// c8y
-@ease_cubic: cubic-bezier(0.75, 0.01, 0.32, 0.99);
+
 .fadeAnim.ng-enter,
 .fadeAnim.ng-leave {
-  transition: 0.5s linear all;
+  transition: 0.5s linear;
 }
 
 .fadeAnim.ng-enter,
@@ -36,8 +49,6 @@
   animation-iteration-count: infinite;
 }
 
-
-
 @keyframes bounce {
   from,
   20%,
@@ -172,16 +183,10 @@
 }
 
 .vibrate {
-  // -webkit-animation: vibrate 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) ;
-  // animation: vibrate 2s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-  // -webkit-transform: translate3d(0, 0, 0);
-  // transform: translate3d(0, 0, 0);
-  // -webkit-backface-visibility: hidden;
-  // backface-visibility: hidden;
   perspective: 300px;
-  transition-duration: 2s;
-  transition-timing-function:  cubic-bezier(0.36, 0.07, 0.19, 0.97);
   animation-name: vibrate;
+  transition-duration: 2s;
+  transition-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
 }
 
 

package/styles/animations/_component-animations.less

@@ -1,3 +1,15 @@
+@import "../mixins/_vendor-prefixes.less";
+
+/**
+ * Component Animations - Fade, collapse, and pulse animations
+ *
+ * Note: Uses color tokens for background colors.
+ *
+ * Intentionally hardcoded values:
+ * - Animation/transition durations (0.15s, 0.35s, 1s): Animation timing
+ * - Percentages in keyframes: Animation keyframe positions
+ */
+
 // We don't use the `.opacity()` mixin here since it causes a bug with text
 // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
 .fade {
@@ -28,28 +40,18 @@
   width: 100%;
   height: 0;
 
-  .transition-property(~'height, visibility');
-  .transition-duration(0.35s);
-  .transition-timing-function(ease);
+  transition-property: height, visibility;
+  transition-duration: 0.35s;
+  transition-timing-function: ease;
 }
 
-.component-pulse {
-  -webkit-animation-name: pulseComponent;
+.component-pulse() {
   animation-name: pulseComponent;
   animation-duration: 1s;
 }
 
-@-webkit-keyframes pulseComponent {
-  0%,
-  20%,
-  50% {
-    background-color: @component-realtime-added;
-  }
-
-  35%,
-  100% {
-    background-color: @component-background-default;
-  }
+.component-pulse {
+  .component-pulse();
 }
 
 @keyframes pulseComponent {

package/styles/animations/_realtime-animation-list.less

@@ -1,7 +1,17 @@
+
+/**
+ * Realtime Animation List - Real-time data update animations
+ *
+ * Note: Uses color tokens for background transitions.
+ *
+ * Intentionally hardcoded values:
+ * - Transition duration (1s): Animation timing for real-time updates
+ */
+
 .realtime-animation-list.ng-enter,
 .realtime-animation-list.ng-change {
   background-color: @component-realtime-added;
-  transition: 1s linear all;
+  transition: 1s linear;
 }
 
 .realtime-animation-list.ng-enter-active,

package/styles/animations/_spinner-snake.less

@@ -1,6 +1,21 @@
+
+/**
+ * Spinner Snake - Rotating spinner/loader animation
+ *
+ * Note: Uses color tokens (@component-brand-primary; @body-background-color; @component-background-default).
+ * Uses @size-16 for margin.
+ *
+ * Intentionally hardcoded values:
+ * - em-based values (4em, 0.6em, 2.2em, etc.): Relative sizing for scalable spinner
+ * - Animation durations (1s, 1.95s) and delays (0.75s): Animation timing
+ * - Negative text-indent (-99999em): Text hiding technique
+ * - Rotation degrees (0deg, 360deg): Animation angles
+ * - Percentages: Keyframe positions
+ */
+
 .spinner-snake {
   position: relative;
-  margin: 16px auto;
+  margin: @size-16 auto;
   width: 4em;
   height: 4em;
   min-width: 4em;
@@ -31,7 +46,7 @@
 
   .card &,
   .modal &,
-  .table-data-grid__loading--loader &{
+  .table-data-grid__loading--loader & {
     background: @component-background-default;
   }
 }

package/styles/animations/_spinner.less

@@ -1,3 +1,21 @@
+@import "../mixins/_vendor-prefixes.less";
+
+/**
+ * Spinner - Rectangle bar spinner/loader animation
+ *
+ * Note: Uses color tokens (@text-muted; @spinner-color) and @size-* tokens where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Spinner dimensions (50px, 40px, 30px, 60px, 45px): Component-specific sizes
+ * - Padding values (45px, 35px, 11px): Component-specific positioning offsets
+ * - Negative margins (-25px, -15px, -28px): Centering calculations (half of width/height)
+ * - Bar width (6px): Spinner bar width (off-grid)
+ * - Animation duration (1.2s) and delays (-1.1s to -0.8s): Animation timing
+ * - Transform scale (0.5): Size reduction for button variant
+ * - RGBA background: Semi-transparent overlay
+ * - Percentages and unitless scale values: Animation and transform values
+ */
+
 c8y-rectangle-spinner,
 .c8y-rectangle-spinner {
   position: relative;
@@ -37,7 +55,7 @@ c8y-rectangle-spinner,
     }
 
     &.spinner-xs {
-      padding-top: 5px;
+      padding-top: @size-5;
       padding-left: 35px;
     }
   }
@@ -51,7 +69,7 @@ c8y-rectangle-spinner,
   width: 50px;
   height: 40px;
   text-align: center;
-  font-size: 10px;
+  font-size: @size-10;
   opacity: 0.5;
 
   &.spinner-xs,
@@ -61,7 +79,7 @@ c8y-rectangle-spinner,
 
     > div {
       margin: 0;
-      width: 4px;
+      width: @size-4;
     }
   }
 }
@@ -116,8 +134,8 @@ c8y-rectangle-spinner,
   background-color: rgba(255, 255, 255, 0.7);
 
   .grid-stack-item & {
-    right: 10px;
-    left: 10px;
+    right: @size-10;
+    left: @size-10;
   }
 
   .spinner {
@@ -134,7 +152,7 @@ c8y-rectangle-spinner,
   vertical-align: middle;
 
   .spinner {
-    .translate(0, -50%);
+    transform: translateY(-50%);
   }
 }
 

package/styles/base/_normalize.less

@@ -1,3 +1,17 @@
+
+/**
+ * Normalize.css v3.0.3 - Third-party CSS reset library
+ *
+ * Note: This file is intentionally left unmodified from the original normalize.css.
+ * All hardcoded values are part of the standard CSS reset specification.
+ *
+ * Intentionally hardcoded values (as per normalize.css specification):
+ * - All margin/padding values (0, em-based, px-based): Standard reset values
+ * - Relative units (em, %): Proportional scaling for cross-browser consistency
+ * - 1px and 2px values: Standard border and spacing values for reset
+ * - Line-height values: Typography reset specifications
+ */
+
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
 // 1. Set default font family to sans-serif.

package/styles/base/_print.less

@@ -1,7 +1,21 @@
+
+/**
+ * Print Styles - Media query for print layouts
+ *
+ * Note: Most spacing values use @size-* tokens from the 8px base unit system.
+ *
+ * Intentionally hardcoded values:
+ * - transform: scale(0.97): Scale factor, not spacing
+ * - 1px borders: Standard border widths for print
+ * - z-index values: Stacking context for print layout
+ * - 100vw/99vh: Full viewport dimensions
+ * - orphans/widows: Typography print control
+ */
+
 @media print {
   body {
     --c8y-elevation-sm: 0 0 0 1px rgba(var(--c8y-elevation-color), 0.1);
-    transform: scale(.97);
+    transform: scale(0.97);
   }
 
   *,
@@ -57,9 +71,9 @@
   }
 
   .btn,
-  .dropup>.btn {
-    >.caret {
-      border-top-color: @black  !important;
+  .dropup > .btn {
+    > .caret {
+      border-top-color: @black !important;
     }
   }
 
@@ -68,15 +82,14 @@
 
     td,
     th {
-      background-color: @component-background-default  !important;
+      background-color: @component-background-default !important;
     }
   }
 
   .table-bordered {
-
     th,
     td {
-      border: 1px solid @gray-90  !important;
+      border: 1px solid @gray-90 !important;
     }
   }
 
@@ -93,13 +106,13 @@
     all: unset;
     margin-top: 0;
     margin-left: 0 !important;
-    padding: 0 24px !important;
+    padding: 0 @size-24 !important;
 
     &:has(.dashboard) {
       padding: 0 !important;
     }
 
-    >.container-fluid {
+    > .container-fluid {
       padding-bottom: 0;
     }
   }
@@ -116,11 +129,11 @@
     z-index: 1085 !important;
     overflow-y: auto;
     margin: 0 !important;
-    padding-top: calc(@margin-base * 4) !important;
-    padding-bottom: 24px !important;
+    padding-top: calc(@size-base * 4) !important;
+    padding-bottom: @size-24 !important;
     width: 100vw;
     height: 99vh;
-    .c8y-scrollbar();
+    &:extend(.c8y-scrollbar);
 
     .dashboard {
       padding-bottom: 0 !important;