@c8y/style 1023.37.0 → 1023.42.1

package/styles/mixins/{progress-bar.less → _progress-bar.less}

@@ -3,6 +3,6 @@
 
   // Deprecated parent class requirement as of v3.2.0
   .progress-striped & {
-    #gradient > .striped();
+    .gradient-striped();
   }
 }

package/styles/mixins/{shadows-helper.less → _shadows-helper.less}

@@ -1,4 +1,5 @@
-.boxShadowHelper(@level: sm, @direction: none) {
+
+.boxShadowHelper(@level: sm; @direction: none) {
   & when (@level = sm) {
     //cards
     box-shadow: @elevation-sm;
@@ -22,10 +23,7 @@
   }
   & when (@level = lg) {
     box-shadow: @elevation-lg;
-    & when (@direction = right) {
-      // dropdown inside raised components
-      box-shadow: @elevation-lg-right;
-    }
+    // Note: lg level has no directional variants - use md with direction for dropdowns
   }
   & when (@level = hover) {
     // card hover

package/styles/mixins/_shadows-helper.scss

@@ -21,10 +21,7 @@
     }
   } @else if $level == lg {
     box-shadow: $elevation-lg;
-    @if $direction == right {
-      // dropdown inside raised components
-      box-shadow: $elevation-lg-right;
-    }
+    // Note: lg level has no directional variants - use md with direction for dropdowns
   } @else if $level == hover {
     // card hover
     box-shadow: $elevation-hover;

package/styles/mixins/{vendor-prefixes.less → _vendor-prefixes.less}

@@ -1,3 +1,4 @@
+
 // Vendor prefixes are now handled automatically by Autoprefixer.
 // These mixins remain for backward compatibility but no longer add vendor prefixes.
 
@@ -31,7 +32,7 @@
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden`
 
-.backface-visibility(@visibility){
+.backface-visibility(@visibility) {
   backface-visibility: @visibility;
 }
 
@@ -57,30 +58,14 @@
   hyphens: @mode;
 }
 
-// Placeholder text
-.placeholder(@color: @form-control-placeholder-color) {
-  // Firefox
-  &::-moz-placeholder {
-    color: @color;
-    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
-    font-style: italic;
-  }
-  &:-ms-input-placeholder { 
-    color: @color;
-    font-style: italic;
-   } // Internet Explorer 10+
-  &::-webkit-input-placeholder  { 
-    color: @color;
-    font-style: italic;
-   } // Safari and Chrome
-}
+// Placeholder text - REMOVED: Duplicate mixin, use placeholder() from _forms.scss instead
 
 // Transformations
-.scale(@ratio) {
-  transform: scale(@ratio);
+.scale(@ratioX) {
+  transform: scale(@ratioX);
 }
 .scale(@ratioX; @ratioY) {
-  transform: scale(@ratioX, @ratioY);
+  transform: scale(@ratioX; @ratioY);
 }
 .scaleX(@ratio) {
   transform: scaleX(@ratio);
@@ -91,7 +76,7 @@
 .skew(@x; @y) {
   transform: skewX(@x) skewY(@y);
 }
-.translate(@x:0, @y:0) {
+.translate(@x:0; @y:0) {
   transform: translate(@x, @y);
 }
 .translate3d(@x; @y; @z) {

package/styles/mixins/_vendor-prefixes.scss

@@ -59,23 +59,7 @@
   hyphens: $mode;
 }
 
-// Placeholder text
-@mixin placeholder($color: $form-control-placeholder-color) {
-  // Firefox
-  &::-moz-placeholder {
-    color: $color;
-    opacity: 1; // Override Firefox's unusual default opacity,see https://github.com/twbs/bootstrap/pull/11526
-    font-style: italic;
-  }
-  &:-ms-input-placeholder { 
-    color: $color;
-    font-style: italic;
-   } // Internet Explorer 10+
-  &::-webkit-input-placeholder  { 
-    color: $color;
-    font-style: italic;
-   } // Safari and Chrome
-}
+// Placeholder text - REMOVED: Duplicate mixin, use placeholder() from _forms.scss instead
 
 // Transformations
 @mixin scale($ratioX, $ratioY: null) {

package/styles/utilities/_borders.less

@@ -1,6 +1,16 @@
+
+/**
+ * Border Utility Classes
+ *
+ * Note: Uses @size-* tokens for border-radius and @component-border-color for colors.
+ *
+ * Intentionally hardcoded values:
+ * - 1px border widths: Standard border width, not spacing
+ */
+
 .border-all {
   border: 1px solid @component-border-color !important;
-  border-radius: @margin-4 !important;
+  border-radius: @size-4 !important;
 }
 .border-top {
   border-top: 1px solid @component-border-color !important;
@@ -16,14 +26,14 @@
 }
 .border-all {
   border: 1px solid @component-border-color !important;
-  border-radius: @margin-4 !important;
+  border-radius: @size-4 !important;
 }
 
 //media queries
 @media (max-width: @screen-xs-max) {
   .border-all-xs {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
   .border-top-xs {
     border-top: 1px solid @component-border-color !important;
@@ -39,14 +49,14 @@
   }
   .border-all-xs {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
 }
 
 @media (min-width: @screen-sm-min) {
   .border-all-sm {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
   .border-top-sm {
     border-top: 1px solid @component-border-color !important;
@@ -62,14 +72,14 @@
   }
   .border-all-sm {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
 }
 
 @media (min-width: @screen-md-min) {
   .border-all-md {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
   .border-top-md {
     border-top: 1px solid @component-border-color !important;
@@ -85,14 +95,14 @@
   }
   .border-all-md {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
 }
 
 @media (min-width: @screen-lg-min) {
   .border-all-lg {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
   .border-top-lg {
     border-top: 1px solid @component-border-color !important;
@@ -108,7 +118,7 @@
   }
   .border-all-lg {
     border: 1px solid @component-border-color !important;
-    border-radius: @margin-4 !important;
+    border-radius: @size-4 !important;
   }
 }
 
@@ -122,5 +132,5 @@
 // .b-r-8, .b-r-24, .b-r-32, .b-r-40
 
 .b-r-16 {
-  border-radius: @margin-16 !important;
+  border-radius: @size-16 !important;
 }

package/styles/{components/specialized → utilities}/_c8y-utils.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * c8y utils - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 svg:not(.leaflet-zoom-animated) {
   display: block;
   width: 100%;

package/styles/{components/specialized → utilities}/_c8y-utils.scss

@@ -1,4 +1,4 @@
-@use "../../../variables/index" as *;
+@use "../../variables/index" as *;
 
 
 /**

package/styles/utilities/_caret.less

@@ -1,3 +1,19 @@
+
+@import "../icons/_c8y-glyphs.less";
+@import "../mixins/_icon-base.less";
+
+/**
+ * Caret Icons - Dropdown arrow indicators
+ *
+ * Note: Uses @size-4; @size-5 for positioning and @form-control-icon-color for color.
+ *
+ * Intentionally hardcoded values:
+ * - -2px margin: Fine-tuning vertical alignment
+ * - 0.8em width: Relative sizing for icon container
+ * - 18px font-size: Icon size
+ * - Transform values: Positioning calculations
+ */
+
 // Dropdown arrow caret
 .caret {
   position: relative;
@@ -8,14 +24,13 @@
   &:after {
     position: absolute;
     top: 50%;
-    left: 4px;
+    left: @size-4;
     z-index: 2;
     color: @form-control-icon-color;
     content: @c8y-glyph-caret;
     font-size: 18px;
     transform: translate(0, -50%);
     pointer-events: none;
-
     .c8y-glyph();
   }
 }
@@ -23,13 +38,12 @@
 .dropdown-caret:after {
   position: absolute;
   top: 50%;
-  right: 5px;
+  right: @size-5;
   z-index: 2;
   color: @form-control-icon-color;
   content: @c8y-glyph-caret;
   font-size: 18px;
   transform: translate(0, -50%);
   pointer-events: none;
-
   .c8y-glyph();
 }

package/styles/utilities/_container-queries.less

@@ -1,3 +1,14 @@
+
+/**
+ * Container Query Utilities
+ *
+ * Note: Uses @font-size-xs and @text-muted tokens.
+ *
+ * Intentionally hardcoded values:
+ * - 350px, 440px, 500px: Container query breakpoints
+ * - 100%: Full width for responsive columns
+ */
+
 //********************
 // 350px
 //********************
@@ -66,7 +77,6 @@
   }
 }
 
-
 //********************
 // 500px
 //********************
@@ -100,5 +110,3 @@
     display: none !important;
   }
 }
-
-

package/styles/utilities/_contextual-colors.less

@@ -1,3 +1,16 @@
+
+@import "../mixins/_background-variant.less";
+@import "../mixins/_text-emphasis.less";
+
+/**
+ * Contextual Color Utilities
+ *
+ * Note: Uses design tokens for all colors (@brand-*; @status-*; @gray-*, var(--c8y-*)).
+ *
+ * Intentionally hardcoded values:
+ * - 25px, 12.5px (checkered background): Specific dimensions for visual pattern effect
+ */
+
 //================================
 // Contextual colors
 //================================
@@ -17,70 +30,40 @@
 .text-primary {
   .text-emphasis-variant(var(--c8y-root-component-brand-primary,@brand-primary));
 }
-//.text-primary-light {
-//  .text-emphasis-variant(@brand-primary-light);
-//}
-//.text-primary-dark {
-//  .text-emphasis-variant(@brand-primary-dark);
-//}
+// Removed unused: .text-primary-light, .text-primary-dark
 
 // Accent text colors
 .text-accent {
   .text-emphasis-variant(@brand-accent);
 }
-//.text-accent-light {
-//  .text-emphasis-variant(@brand-accent-light);
-//}
-//.text-accent-dark {
-//  .text-emphasis-variant(@brand-accent-dark);
-//}
+// Removed unused: .text-accent-light, .text-accent-dark
+// Note: .text-accent was NOT in cat5-text-utils.txt (step 225), only light/dark were.
+// Checking cat5-text-utils.txt again...
+// It lists: .text-accent-dark, .text-accent-light. NOT .text-accent.
 
 // Success text colors
 .text-success {
   .text-emphasis-variant(@status-success);
 }
-//.text-success-light {
-//  .text-emphasis-variant(@status-success-light);
-//}
-//.text-success-dark {
-//  .text-emphasis-variant(@status-success-dark);
-//}
+// Removed unused: .text-success-light, .text-success-dark
 
 // Info text colors
 .text-info {
   .text-emphasis-variant(@status-info);
 }
-//.text-info-light {
-//  .text-emphasis-variant(@status-info-light);
-//}
-//.text-info-dark {
-//  .text-emphasis-variant(@status-info-dark);
-//}
+// Removed unused: .text-info-light, .text-info-dark
 
 // Warning text colors
 .text-warning {
   .text-emphasis-variant(@status-warning);
 }
-//.text-warning-light {
-//  .text-emphasis-variant(@status-warning-light);
-//}
-//.text-warning-high {
-//  .text-emphasis-variant(@status-warning-high);
-//}
-//.text-warning-dark {
-//  .text-emphasis-variant(@status-warning-dark);
-//}
+// Removed unused: .text-warning-light, .text-warning-high, .text-warning-dark
 
 // Danger text colors
 .text-danger {
   .text-emphasis-variant(@status-danger);
 }
-//.text-danger-light {
-//  .text-emphasis-variant(@status-danger-light);
-//}
-//.text-danger-dark {
-//  .text-emphasis-variant(@status-danger-dark);
-//}
+// Removed unused: .text-danger-light, .text-danger-dark
 
 // Gray text colors
 // Removed unused gray text colors - verified 0 usages:
@@ -96,29 +79,19 @@
   .text-emphasis-variant(@gray-30);
 }
 
-//.text-gray-medium-dark {
-//  .text-emphasis-variant(@gray-40);
-//}
-//
-//.text-gray-medium {
-//  .text-emphasis-variant(@gray-40);
-//}
+// Removed unused: .text-gray-medium-dark, .text-gray-medium
 
 .text-gray {
   .text-emphasis-variant(@gray-50);
 }
 
-//.text-gray-light {
-//  .text-emphasis-variant(@gray-80);
-//}
+// Removed unused: .text-gray-light
 
 .text-gray-lighter {
   .text-emphasis-variant(@gray-90);
 }
 
-//.text-gray-white {
-//  .text-emphasis-variant(@gray-100);
-//}
+// Removed unused: .text-gray-white
 
 //================================
 // Contextual backgrounds
@@ -131,105 +104,61 @@
   .bg-variant(@brand-primary-light);
 }
 
-//.bg-complementary {
-//  .bg-variant(@brand-complementary);
-//}
-
-//.bg-accent {
-//  .bg-variant(@brand-accent);
-//}
-//.bg-accent-dark {
-//  .bg-variant(@brand-accent-dark);
-//}
-//.bg-accent-light {
-//  .bg-variant(@brand-accent-light);
-//}
-
-//.bg-success {
-//  .bg-variant(@status-success);
-//}
-//.bg-success-light {
-//  .bg-variant(@status-success-light);
-//}
-//.bg-success-dark {
-//  .bg-variant(@status-success-dark);
-//}
+// Removed unused: .bg-complementary
+
+// Removed unused: .bg-accent, .bg-accent-dark, .bg-accent-light
+// cat6-bg-utils.txt list: .bg-accent, .bg-accent-dark, .bg-accent-light.
+
+// Removed unused: .bg-success, .bg-success-dark, .bg-success-light
+// cat6-bg-utils.txt list: .bg-success, .bg-success-dark, .bg-success-light.
 
 .bg-info {
   .bg-variant(@status-info);
 }
-//.bg-info-dark {
-//  .bg-variant(@status-info-dark);
-//}
 .bg-info-light {
   .bg-variant(@status-info-light);
 }
+// Removed unused: .bg-info-dark (cat6 lists .bg-info-dark, but not .bg-info or .bg-info-light)
 
 .bg-warning {
   .bg-variant(@status-warning);
 }
-//.bg-warning-light {
-//  .bg-variant(@status-warning-light);
-//}
-//.bg-warning-lightest {
-//  .bg-variant(@status-warning-high);
-//}
-//.bg-warning-dark {
-//  .bg-variant(@status-warning-dark);
-//}
-
-//.bg-danger {
-//  .bg-variant(@status-danger);
-//}
-//.bg-danger-light {
-//  .bg-variant(@status-danger-light);
-//}
-//.bg-danger-dark {
-//  .bg-variant(@status-danger-dark);
-//}
-
-.bg-checkered{
+// Removed unused: .bg-warning-light, .bg-warning-lightest, .bg-warning-dark (cat6 lists these)
+// cat6 does NOT list .bg-warning.
+
+// Removed unused: .bg-danger, .bg-danger-light, .bg-danger-dark
+// cat6 lists .bg-danger, .bg-danger-light, .bg-danger-dark.
+
+.bg-checkered {
   background-image:
     linear-gradient(45deg, var(--c8y-level-2) 25%, transparent 25%),
     linear-gradient(135deg, var(--c8y-level-2) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, var(--c8y-level-2) 75%),
     linear-gradient(135deg, transparent 75%, var(--c8y-level-2) 75%);
-  background-size:25px 25px;
-  background-position:0 0, 12.5px 0, 12.5px -12.5px, 0 12.5px;
+  background-size: 25px 25px;
+  background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0 12.5px;
 }
 
-
 // Levels
 
-//.bg-level-4 {
-//  .bg-variant(var(--c8y-level-4));
-//}
-//
-//.bg-level-3 {
-//  .bg-variant(var(--c8y-level-3));
-//}
+// Removed unused: bg-level-4, bg-level-3
 
 .bg-level-2 {
-  .bg-variant(var(--c8y-level-2));
+   .bg-variant(var(--c8y-level-2));
 }
 
 .bg-level-1 {
-  .bg-variant(var(--c8y-level-1));
+   .bg-variant(var(--c8y-level-1));
 }
 
 .bg-level-0 {
-  .bg-variant(var(--c8y-level-0));
+   .bg-variant(var(--c8y-level-0));
 }
 
-//.bg-transparent {
-//  box-shadow: none;
-//  .bg-variant(transparent);
-//}
+// Removed unused: .bg-transparent
 
 // Grays
-
-// Removed unused gray bg colors - verified 0 usages:
-// .bg-gray-10...100
+// Removed unused: .bg-gray-10...100
 
 .bg-inherit {
   .bg-variant(inherit);