@c8y/style 1023.30.0 → 1023.42.1

package/styles/core/forms/_c8y-switch.less

@@ -1,3 +1,23 @@
+
+
+/**
+ * C8Y Switch - Toggle switch form control
+ *
+ * Note: Uses @switch-sm variable and @form-control-* variables. Uses @size-* tokens where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Fine-tuning offsets (2px, 3px, 6px): Switch handle positioning and spacing
+ * - Hardcoded height (32px): Form control height reference in calc
+ * - Box-shadow values (2px, 3px): Shadow depth
+ * - Outline width (2px): Focus indicator
+ * - Transition durations (0.25s): Animation timing
+ * - Percentages (33.333%, 100%): Fractional layout
+ * - Opacity values: Visual effects
+ * - RGBA values: Shadow colors
+ */
+
+// Note: Mixins with @content not used - expanded inline for LESS compatibility
+
 .c8y-switch {
   display: flex;
   position: relative;
@@ -53,7 +73,7 @@
         background-color: @switch-background-default;
         box-shadow: none;
 
-        .transition(background 0.25s ease);
+        transition: background 0.25s ease;
       }
 
       &::after {
@@ -67,8 +87,8 @@
         background-color: var(--c8y-switch-handle-background, @form-control-background-default);
         content: '';
 
-        .box-shadow(0 2px 3px fade(@black, 20%));
-        .transition(all 0.25s ease) !important;
+        box-shadow: 0 2px 3px rgba(@black, 0.2);
+        transition: all 0.25s ease !important;
       }
     }
 
@@ -119,7 +139,7 @@
   justify-content: stretch;
   align-items: center;
   height: @form-control-height-base;
-  border-radius: 16px;
+  border-radius: @size-16;
   width: 100%;
   background: @gray-60;
   position: relative;
@@ -127,7 +147,7 @@
   [class^='dlt-c8y-icon-'],
   [class*=' dlt-c8y-icon-'],
   .c8y-icon {
-    font-size: 16px;
+    font-size: @size-16;
   }
 
   input {
@@ -145,26 +165,26 @@
     text-align: center;
     cursor: pointer;
     position: relative;
-    z-index: 100;
+    z-index: 5;
   }
 
   &__handle {
     display: block;
-    height: 24px;
-    width: calc(33.333% - 8px);
+    height: @size-24;
+    width: calc(33.333% - @size-8);
     background-color: var(--c8y-switch-handle-background, @form-control-background-default);
-    .box-shadow(0 2px 3px fade(@black, 20%));
-    border-radius: 16px;
+    box-shadow: 0 2px 3px rgba(@black, 0.2);
+    border-radius: @size-16;
     position: absolute;
     transition: left 0.25s ease;
-    top: 4px;
-    z-index: 40;
+    top: @size-4;
+    z-index: 3;
     transform: translate(-50%, 0);
-    .c8y-dark-theme &{
+    .c8y-dark-theme & {
       --c8y-switch-handle-background: var(--brand-primary, var(--c8y-brand-primary));
     }
-    .c8y-system-theme &{
-      @media (prefers-color-scheme: dark){
+    .c8y-system-theme & {
+      @media (prefers-color-scheme: dark) {
         --c8y-switch-handle-background: var(--brand-primary, var(--c8y-brand-primary));
       }
     }
@@ -176,7 +196,7 @@
         outline: 2px solid @component-color-focus;
       }
     }
-  
+
     &:checked,
     &:focus {
       &:nth-child(1) {
@@ -198,13 +218,13 @@
       }
     }
   }
-  .c8y-dark-theme &{
+  .c8y-dark-theme & {
     input:checked + label {
       color: @gray-100;
     }
   }
-  .c8y-system-theme &{
-    @media (prefers-color-scheme: dark){
+  .c8y-system-theme & {
+    @media (prefers-color-scheme: dark) {
       input:checked + label {
         color: @gray-100;
       }

package/styles/core/forms/_c8y-switch.scss

@@ -1,3 +1,4 @@
+
 @use "../../../variables/index" as *;
 
 /**
@@ -16,26 +17,7 @@
  * - RGBA values: Shadow colors
  */
 
-// Shared mixin for multistate handle positioning
-@mixin multistate-handle-position($nth, $multiplier) {
-  &:nth-child(#{$nth}) {
-    ~ .c8y-switch-multistate__handle {
-      left: calc((100% / 6) * #{$multiplier});
-    }
-  }
-}
-
-// Shared mixin for dark theme styles
-@mixin dark-theme-styles {
-  .c8y-dark-theme & {
-    @content;
-  }
-  .c8y-system-theme & {
-    @media (prefers-color-scheme: dark) {
-      @content;
-    }
-  }
-}
+// Note: Mixins with @content not used - expanded inline for LESS compatibility
 
 .c8y-switch {
   display: flex;
@@ -107,7 +89,7 @@
         content: '';
 
         box-shadow: 0 2px 3px rgba($black, 0.2);
-        transition: all 0.25s ease;
+        transition: all 0.25s ease !important;
       }
     }
 
@@ -184,7 +166,7 @@
     text-align: center;
     cursor: pointer;
     position: relative;
-    z-index: 100;
+    z-index: 5;
   }
 
   &__handle {
@@ -197,11 +179,16 @@
     position: absolute;
     transition: left 0.25s ease;
     top: $size-4;
-    z-index: 40;
+    z-index: 3;
     transform: translate(-50%, 0);
-    @include dark-theme-styles {
+    .c8y-dark-theme & {
       --c8y-switch-handle-background: var(--brand-primary, var(--c8y-brand-primary));
     }
+    .c8y-system-theme & {
+      @media (prefers-color-scheme: dark) {
+        --c8y-switch-handle-background: var(--brand-primary, var(--c8y-brand-primary));
+      }
+    }
   }
 
   input {
@@ -213,14 +200,35 @@
 
     &:checked,
     &:focus {
-      @include multistate-handle-position(1, 1);
-      @include multistate-handle-position(3, 3);
-      @include multistate-handle-position(5, 5);
+      &:nth-child(1) {
+        ~ .c8y-switch-multistate__handle {
+          left: calc(100% / 6);
+        }
+      }
+
+      &:nth-child(3) {
+        ~ .c8y-switch-multistate__handle {
+          left: calc((100% / 6) * 3);
+        }
+      }
+
+      &:nth-child(5) {
+        ~ .c8y-switch-multistate__handle {
+          left: calc((100% / 6) * 5);
+        }
+      }
     }
   }
-  @include dark-theme-styles {
+  .c8y-dark-theme & {
     input:checked + label {
       color: $gray-100;
     }
   }
-}
+  .c8y-system-theme & {
+    @media (prefers-color-scheme: dark) {
+      input:checked + label {
+        color: $gray-100;
+      }
+    }
+  }
+}

package/styles/core/forms/_file-picker.less

@@ -1,23 +1,77 @@
-c8y-drop-area{
-  display: block;
+@import "../../mixins/_gradients.less";
+@import "../../mixins/_opacity.less";
+
+/**
+ * File Picker - File upload component with drag-and-drop
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific sizes (36px, 28px, 100px, 150px, 300px): Icon and container dimensions
+ * - Fine-tuning offsets (3px, 6px): Positioning adjustments
+ * - Border widths (2px): Standard dashed borders
+ * - Transition duration (0.35s): Animation timing
+ * - Transform scale (1.1): Hover effect
+ */
+
+// Shared mixin for upload status/placeholder styling
+.upload-elements-styling() {
+  .upload-status,
+  .upload-placeholder {
+    padding: 0 @size-16;
+    width: 100%;
+  }
 }
 
-.drop-zone {
-  position: relative;
-  display: block;
-  padding-bottom: 100%;
-  height: 0;
+// Shared mixin for alert positioning
+.alert-positioning() {
   .alert {
     position: absolute;
     bottom: 0;
     margin: 0;
     width: 100%;
   }
-  .upload-status,
-  .upload-placeholder {
-    padding: 0 @margin-16;
-    width: 100%;
+}
+
+// Shared mixin for file placeholder icon styling
+.file-placeholder-icon() {
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'] {
+    color: @component-brand-primary;
+    font-size: 36px;
+    transition: all 0.35s ease;
+  }
+}
+
+// Shared mixin for icon hover/drag-over effect
+.icon-hover-effect() {
+  .hint-placeholder {
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      transform: scale(1.1);
+    }
+  }
+}
+
+// Shared mixin for error state styling
+.file-placeholder-error() {
+  &.has-errors .file-placeholder {
+    border-bottom-style: solid;
+    border-bottom-color: @form-control-validation-error;
   }
+}
+
+c8y-drop-area {
+  display: block;
+}
+
+.drop-zone {
+  position: relative;
+  display: block;
+  padding-bottom: 100%;
+  height: 0;
+  .alert-positioning();
+  .upload-elements-styling();
   .file-placeholder {
     position: absolute;
     display: flex;
@@ -31,31 +85,16 @@ c8y-drop-area{
     text-align: center;
     transition: border 0.25s ease;
     .hint-placeholder {
-      [class^='dlt-c8y-icon-'],
-      [class*=' dlt-c8y-icon-'] {
-        color: @component-brand-primary;
-        font-size: 36px;
-
-        .transition(all 0.35s ease);
-      }
+      .file-placeholder-icon();
     }
 
     &.drag-over,
     &:hover {
       border-color: @component-brand-primary;
-
-      .hint-placeholder {
-        [class^='dlt-c8y-icon-'],
-        [class*=' dlt-c8y-icon-'] {
-          .scale(1.1);
-        }
-      }
+      .icon-hover-effect();
     }
   }
-  &.has-errors .file-placeholder {
-    border-bottom-style: solid;
-    border-bottom-color: @form-control-validation-error;
-  }
+  .file-placeholder-error();
   &.drop-zone-sm,
   .drop-area-sm & {
     padding: 0;
@@ -69,7 +108,7 @@ c8y-drop-area{
       display: block;
       .hint-placeholder {
         position: relative;
-        padding: 10px 10px 10px 50px;
+        padding: @size-10 @size-10 @size-10 50px;
         text-align: left;
         [class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {
@@ -77,7 +116,7 @@ c8y-drop-area{
           top: 50%;
           left: 3px;
 
-          .translate(0, -50%);
+          transform: translate(0, -50%);
         }
         p {
           margin-bottom: 0;
@@ -97,7 +136,7 @@ c8y-drop-area{
       .hint-placeholder {
         [class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {
-          left: 8px;
+          left: @size-8;
           font-size: 28px;
         }
         p {
@@ -119,7 +158,7 @@ c8y-drop-area{
       cursor: @cursor-disabled !important;
       color: @component-color-default;
       .opacity(0.65);
-      .box-shadow(none);
+      box-shadow: none;
     }
   }
 }
@@ -131,27 +170,18 @@ c8y-file-picker-form-control {
     min-height: 150px;
     height: fit-content;
     transition: min-height 0.25s ease;
-    padding: 10px;
+    padding: @size-10;
 
     &.unsupported-format {
       background-size: 100px 100px;
-      #gradient > .striped(rgba(0, 0, 0, 0.10));;
+      .gradient-striped(rgba(0, 0, 0, 0.10));
     }
 
     &.dragging {
       min-height: 300px;
     }
-    .alert {
-      position: absolute;
-      bottom: 0;
-      margin: 0;
-      width: 100%;
-    }
-    .upload-status,
-    .upload-placeholder {
-      padding: 0 @margin-16;
-      width: 100%;
-    }
+    .alert-positioning();
+    .upload-elements-styling();
     .file-placeholder {
       flex: 1;
       display: flex;
@@ -165,15 +195,12 @@ c8y-file-picker-form-control {
       transition: border 0.25s ease;
 
       .hint-placeholder {
+        .file-placeholder-icon();
         [class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {
           &.warning {
             color: var(--palette-status-warning, var(--c8y-palette-status-warning));
           }
-          color: @component-brand-primary;
-          font-size: 36px;
-
-          .transition(all 0.35s ease);
         }
       }
 
@@ -183,18 +210,9 @@ c8y-file-picker-form-control {
       &.drag-over,
       &:hover {
         border-color: @component-brand-primary;
-
-        .hint-placeholder {
-          [class^='dlt-c8y-icon-'],
-          [class*=' dlt-c8y-icon-'] {
-            .scale(1.1);
-          }
-        }
+        .icon-hover-effect();
       }
     }
-    &.has-errors .file-placeholder {
-      border-bottom-style: solid;
-      border-bottom-color: @form-control-validation-error;
-    }
+    .file-placeholder-error();
   }
 }