@c8y/style 1023.37.0 → 1023.42.1

package/styles/core/buttons/_buttons.scss

@@ -3,6 +3,7 @@
 @use "../../mixins/buttons";
 @use "../../mixins/gradients";
 @use "../../mixins/opacity";
+@use "../../mixins/shadows-helper";
 @use "../../mixins/tab-focus";
 
 /**
@@ -115,7 +116,6 @@
   padding-left: $btn-padding-icon-horizontal !important;
   padding-right: $btn-padding-icon-horizontal !important;
   height: $form-control-height-base;
-  display: inline-flex;
   align-items: center;
 
   &:hover,
@@ -793,19 +793,15 @@ label + .btn-help, label .btn-help {
 
 // Button Sizes
 .btn-lg {
-  @include buttons.button-size($btn-padding-large-vertical, $btn-padding-large-horizontal, $btn-font-size-large, $btn-line-height-large,
-    $btn-border-radius-large, $form-control-height-lg,
-);
+  @include buttons.button-size($btn-padding-large-vertical, $btn-padding-large-horizontal, $btn-font-size-large, $btn-line-height-large, $btn-border-radius-large, $form-control-height-lg);
 }
 
 .btn-sm {
-  @include buttons.button-size($btn-padding-small-vertical, $btn-padding-small-horizontal, $btn-font-size-small,
-    $btn-line-height-small, $btn-border-radius-small, $form-control-height-sm);
+  @include buttons.button-size($btn-padding-small-vertical, $btn-padding-small-horizontal, $btn-font-size-small, $btn-line-height-small, $btn-border-radius-small, $form-control-height-sm);
 }
 
 .btn-xs {
-  @include buttons.button-size($btn-padding-xs-vertical, $btn-padding-xs-horizontal, $btn-font-size-xs,
-    $btn-line-height-xs, $btn-border-radius-xs, $checkbox-size);
+  @include buttons.button-size($btn-padding-xs-vertical, $btn-padding-xs-horizontal, $btn-font-size-xs, $btn-line-height-xs, $btn-border-radius-xs, $checkbox-size);
   position: relative;
 
   > .icon-spin {
@@ -1119,7 +1115,7 @@ input[type='button'] {
       z-index: -1;
       border-radius: calc($switch-height / 2) !important;
       background-color: var(--c8y-switch-handle-background, $form-control-background-default);
-      box-shadow: 0 2px 3px rgba(black, math.div(20, 100));
+      box-shadow: 0 2px 3px rgba($black, 0.2);
       transition: all 0.25s ease;
     }
 
@@ -1202,7 +1198,7 @@ input[type='button'] {
 
     .dropdown.open & {
       background: white;
-      // .boxShadowHelper(4) !important;
+      @include shadows-helper.boxShadowHelper(md, right);
     }
   }
 }

package/styles/core/feedback/_alerts.less

@@ -1,6 +1,35 @@
+@import "../../mixins/_alert-variant.less";
+@import "../../mixins/_c8y-scrollbar.less";
+@import "../../mixins/_shadows-helper.less";
+
+/**
+ * Alerts - Alert/notification component styles
+ *
+ * Note: Uses @alert-* variables and @size-* tokens for spacing. Uses CSS custom properties for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Alert icon width (44px): Icon area specific size
+ * - Alert widths (280px, 480px): Component-specific responsive widths
+ * - Positioning offsets (-2px, -21px, 130px, 90px, 60px): Fine-tuning and breakpoint-specific positioning
+ * - Line-height (2.2): Typography ratio for icon alignment
+ * - Blur (3px): Backdrop filter effect
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index values (1035): Stacking order
+ * - Percentages (50%): Color mixing
+ */
+
+// Shared mixin for prompt icon coloring
+.prompt-icon-color(@color) {
+  h3 > i,
+  h3 > [class^='dlt-c8y-icon-'],
+  h3 > [class*=' dlt-c8y-icon-'] {
+    color: @color;
+  }
+}
+
 .alert {
-  --c8y-btn-default-background-default: @alert-background;
-  margin-bottom: @margin-base;
+  --c8y-btn-default-background-default: @{alert-background};
+  margin-bottom: @size-base;
   padding: @alert-padding;
   max-width: @alert-max-width;
   border-radius: @component-border-radius-base;
@@ -12,7 +41,7 @@
   > span {
     white-space: pre-line;
   }
-  
+
   &:before {
     position: absolute;
     top: 0;
@@ -42,65 +71,49 @@
     margin-bottom: 0;
   }
   > p + p {
-    margin-top: @margin-base;
+    margin-top: @size-base;
   }
   > .close {
-    margin-left: @margin-8;
+    margin-left: @size-8;
   }
 
   &.c8y-prompt {
     margin-bottom: 0;
-    padding: calc(@margin-base * 5);
+    padding: calc(@size-base * 5);
     &:before {
       content: '' !important;
     }
     h3 {
       font-weight: 500;
-      font-size: 20px;
+      font-size: @size-20;
       > [class^='dlt-c8y-icon-'],
       > [class*=' dlt-c8y-icon-'] {
-        margin-right: 4px;
-        font-size: 24px;
+        margin-right: @size-4;
+        font-size: @size-24;
       }
     }
     .alert-footer {
-      padding: calc(@margin-base * 5) 0 0;
+      padding: calc(@size-base * 5) 0 0;
       text-align: right;
       button {
         margin-bottom: 0 !important;
       }
     }
     &.alert-success {
-      h3 > i,
-      h3 > [class^='dlt-c8y-icon-'],
-      h3 > [class*=' dlt-c8y-icon-'] {
-        color: @alert-success-border;
-      }
+      .prompt-icon-color(@alert-success-border);
     }
     &.alert-warning {
       &:before {
         z-index: 10;
       }
 
-      h3 > i,
-      h3 > [class^='dlt-c8y-icon-'],
-      h3 > [class*=' dlt-c8y-icon-'] {
-        color: @alert-warning-border;
-      }
+      .prompt-icon-color(@alert-warning-border);
     }
     &.alert-danger {
-      h3 > i,
-      h3 > [class^='dlt-c8y-icon-'],
-      h3 > [class*=' dlt-c8y-icon-'] {
-        color: @alert-danger-border;
-      }
+      .prompt-icon-color(@alert-danger-border);
     }
     &.alert-info {
-      h3 > i,
-      h3 > [class^='dlt-c8y-icon-'],
-      h3 > [class*=' dlt-c8y-icon-'] {
-        color: @alert-info-border;
-      }
+      .prompt-icon-color(@alert-info-border);
     }
   }
 }
@@ -109,7 +122,7 @@
 // Expand the right padding and account for the close button's positioning.
 .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
 .alert-dismissible {
-  padding-right: calc(@component-padding + 20); // Adjust close link position
+  padding-right: calc(@component-padding + @size-20); // Adjust close link position
   .close {
     position: relative;
     top: -2px;
@@ -161,7 +174,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     margin-top: @headerHeight;
-    padding: 0 16px 16px 48px;
+    padding: 0 @size-16 @size-16 @size-48;
     max-height: calc(100vh - @headerHeight);
     pointer-events: auto;
 
@@ -169,7 +182,7 @@
   }
 
   .alert {
-    margin: @margin-base @margin-24 @margin-16 auto;
+    margin: @size-base @size-24 @size-16 auto;
     width: 280px;
     transition: width 0.35s ease-in-out;
     pointer-events: auto;
@@ -202,22 +215,20 @@
 }
 
 // prevent double scroll bars on widgets when the alerts overlay is displayed
-.alerts-overlay{
-  .card-inner-scroll{
-    overflow: hidden!important;
+.alerts-overlay {
+  .card-inner-scroll {
+    overflow: hidden !important;
   }
 }
 
-
 // container to hold alerts on widgets
 .inner-alert {
   position: absolute;
-  right: 15px;
-  left: 15px;
+  right: @size-16;
+  left: @size-16;
   z-index: 1035;
-  top: 50%;
   .alert {
-    margin: 0 auto 10px;
+    margin: 0 auto @size-10;
   } // on data-explorer
   .measurement-icon-bar & {
     top: 130px;

package/styles/core/feedback/_badges.less

@@ -1,5 +1,26 @@
+
+/**
+ * Badges - Small count and labeling component
+ *
+ * Note: Uses @badge-* variables and CSS custom properties (--c8y-unit-base) for sizing.
+ *
+ * Intentionally hardcoded values:
+ * - Box-shadow widths (1px, 2px): Border simulation via inset shadow
+ * - Padding (0.4em): Relative padding for scalability
+ * - Margin-left (3px): Fine-tuning for nav pills spacing
+ */
+
+// Shared mixin for badge variants
+.badge-variant(@bg-color; @text-color; @include-shadow: true) {
+  background-color: @bg-color;
+  color: @text-color;
+  & when (@include-shadow = true) {
+    box-shadow: inset 0 0 0 1px @text-color;
+  }
+}
+
 .badge {
-  display: inline-flex!important;
+  display: inline-flex !important;
   min-width: calc(var(--c8y-unit-base) * 2.25);
   min-height: calc(var(--c8y-unit-base) * 2.25);
   justify-content: center;
@@ -16,39 +37,30 @@
   padding: 0 0.4em;
 
   &.badge-success {
-    background-color: @badge-background-success;
-    color: @badge-color-success;
-    box-shadow: inset 0 0 0 1px @badge-color-success;
+    .badge-variant(@badge-background-success; @badge-color-success);
   }
 
   &.badge-danger {
-    background-color: @badge-background-danger;
-    color: @badge-color-danger;
-    box-shadow: inset 0 0 0 1px @badge-color-danger;
+    .badge-variant(@badge-background-danger; @badge-color-danger);
   }
 
   &.badge-warning {
-    background-color: @badge-background-warning;
-    color: @badge-color-warning;
-    box-shadow: inset 0 0 0 1px @badge-color-warning;
+    .badge-variant(@badge-background-warning; @badge-color-warning);
   }
 
   &.badge-system {
-    background-color: @badge-background-system;
-    color: @badge-color-system;
+    .badge-variant(@badge-background-system; @badge-color-system; @include-shadow: false);
   }
 
   &.badge-info {
-    background-color: @badge-background-info;
-    box-shadow: inset 0 0 0 1px @badge-color-info;
-    color: @badge-color-info;
+    .badge-variant(@badge-background-info; @badge-color-info);
   }
 
   // Empty badges collapse automatically (not available in IE8)
   &:empty {
     display: none;
   }
-  
+
   a & {
     &:hover,
     &:focus {
@@ -64,7 +76,7 @@
     float: right;
   }
   .list-group-item > & + & {
-    margin-right: 5px;
+    margin-right: @size-5;
   }
   .nav-pills > li > a > & {
     margin-left: 3px;

package/styles/core/feedback/_close.less

@@ -1,9 +1,26 @@
+
+/**
+ * Close - Close button component for dismissible elements
+ *
+ * Note: Uses @size-* tokens for sizing. Uses color tokens.
+ *
+ * Intentionally hardcoded values:
+ * - Outline width (2px): Standard focus indicator
+ * - Outline-offset (-2px): Inset positioning
+ */
+
+// Shared focus outline mixin
+.close-focus-outline() {
+  outline: 2px solid @component-color-focus;
+  outline-offset: -2px;
+}
+
 .close {
   float: right;
   color: @gray-50;
   font-weight: normal;
-  font-size: 20px;
-  line-height: 16px;
+  font-size: @size-20;
+  line-height: @size-16;
 
   &:hover,
   &:focus {
@@ -12,8 +29,7 @@
     cursor: pointer;
   }
   &:focus {
-    outline: 2px solid @component-color-focus;
-    outline-offset: -2px;
+    .close-focus-outline();
   }
 }
 
@@ -27,10 +43,11 @@ button.close {
   border: 0;
   background: transparent;
   cursor: pointer;
-
   -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
   &:focus {
-    outline: 2px solid @component-color-focus;
-    outline-offset: -2px;
+    .close-focus-outline();
   }
 }

package/styles/core/feedback/_labels.less

@@ -1,3 +1,17 @@
+@import "../../mixins/_labels.less";
+
+/**
+ * Labels - Inline label/tag component (deprecated, to be replaced by Tag)
+ *
+ * Note: Uses CSS custom properties (--c8y-font-size-xs) and @size-* tokens.
+ *
+ * Intentionally hardcoded values:
+ * - em-based padding/border-radius (0.2em, 0.6em, 0.25em): Relative sizing
+ * - Line-height (1): Unitless for proper alignment
+ * - Positioning offset (-1px): Fine-tuning
+ * - Gap (6px): Off-grid spacing for chip variant
+ */
+
 /* Remove after Codex launch. will be replaced by Tag */
 
 .label {
@@ -16,7 +30,6 @@
   a & {
     &:hover,
     &:focus {
-      // color: @label-link-hover-color;
       text-decoration: none;
       cursor: pointer;
     }
@@ -28,16 +41,16 @@
     position: relative;
     top: -1px;
   }
-  &.chip{
+  &.chip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    height: 20px;
-    .btn-clean{
-      padding: 0!important;
+    height: @size-20;
+    .btn-clean {
+      padding: 0 !important;
     }
-    + .chip{
-      margin-left: 4px;
+    + .chip {
+      margin-left: @size-4;
     }
   }
 }
@@ -63,7 +76,7 @@
 .label-info {
   color: @label-color-info;
   .label-variant(@label-background-info);
-  &.chip{
+  &.chip {
     color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
   }
 }

package/styles/core/feedback/_progress-bars.less

@@ -1,3 +1,22 @@
+
+@import "../../mixins/_gradients.less";
+@import "../../mixins/_progress-bar.less";
+
+/**
+ * Progress Bars - Progress indicator component
+ *
+ * Note: Uses @progress-* and @line-height-computed variables.
+ *
+ * Intentionally hardcoded values:
+ * - Background positions (40px, 0): Animation stripe pattern positioning
+ * - Box-shadow values (1px, 2px, -1px): Shadow depth and positioning
+ * - Background-size (40px 40px): Stripe pattern dimensions
+ * - Animation duration (2s): Animation timing
+ * - Transition duration (0.6s): Animation timing
+ * - RGBA values: Shadow opacity
+ * - Percentages: Width values
+ */
+
 @-webkit-keyframes progress-bar-stripes {
   from {
     background-position: 40px 0;
@@ -24,8 +43,7 @@
   height: @line-height-computed;
   border-radius: @progress-border-radius;
   background-color: @progress-bg;
-
-  .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 // Bar of progress
@@ -38,9 +56,8 @@
   text-align: center;
   font-size: @font-size-small;
   line-height: @line-height-computed;
-
-  .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15));
-  .transition(width 0.6s ease);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  transition: width 0.6s ease;
 }
 
 // Striped bars
@@ -50,14 +67,14 @@
 .progress-bar-striped {
   background-size: 40px 40px;
 
-  #gradient > .striped();
+  .gradient-striped();
 }
 
 // Call animation for the active one
 // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the `.progress-bar.active` approach.
 .progress.active .progress-bar,
 .progress-bar.active {
-  .animation(progress-bar-stripes 2s linear infinite);
+  animation: progress-bar-stripes 2s linear infinite;
 }
 
 // Variations

package/styles/core/feedback/_tag.less

@@ -1,3 +1,17 @@
+@import "../../mixins/_tag.less";
+
+/**
+ * Tag - Tag/label component (replacement for Label)
+ *
+ * Note: Uses CSS custom properties (--c8y-font-size-xs) and @size-* tokens.
+ *
+ * Intentionally hardcoded values:
+ * - em-based padding/border-radius (0.2em, 0.6em, 0.25em): Relative sizing
+ * - Line-height (1): Unitless for proper alignment
+ * - Positioning offset (-1px): Fine-tuning
+ * - Gap (6px): Off-grid spacing for chip variant
+ */
+
 .tag {
   display: inline;
   padding: 0.2em 0.6em 0.2em;
@@ -11,8 +25,9 @@
   font-weight: 500;
   font-size: var(--c8y-font-size-xs);
   line-height: 1;
+  flex-shrink: 0;
   align-self: flex-start;
-  .form-control &{
+  .form-control & {
     align-self: center;
   }
   a & {
@@ -34,13 +49,13 @@
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    height: 20px;
-    flex: 0 1 fit-content;
+    height: @size-20;
+    flex: 0 0 fit-content;
     .btn-clean{
       padding: 0!important;
     }
     + .chip{
-      margin-left: 4px;
+      margin-left: @size-4;
     }
   }
 }
@@ -66,7 +81,7 @@
 .tag--info {
   color: @tag--color-info;
   .tag--variant(@tag--background-info);
-  &.chip{
+  &.chip {
     color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
   }
 }
@@ -79,7 +94,9 @@
 .tag--danger {
   color: @tag--color-danger;
   .tag--variant(@tag--background-danger);
-}// Font size inherit
+}
+
+// Font size inherit
 .text--inherit {
   font-size: inherit;
 }

package/styles/core/feedback/_tooltip.less

@@ -1,3 +1,37 @@
+
+@import "../../mixins/_reset-text.less";
+
+/**
+ * Tooltip - Tooltip overlay component
+ *
+ * Note: Uses @tooltip-* variables and @size-8 for padding.
+ *
+ * Intentionally hardcoded values:
+ * - Margin offsets (±3px): Off-grid positioning fine-tuning for arrow alignment
+ * - Padding (3px): Off-grid vertical padding for compact tooltip
+ */
+
+// Shared mixins for tooltip arrow borders
+.tooltip-arrow-top-border() {
+  border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+  border-top-color: @tooltip-arrow-color;
+}
+
+.tooltip-arrow-bottom-border() {
+  border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+  border-bottom-color: @tooltip-arrow-color;
+}
+
+.tooltip-arrow-right-border() {
+  border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+  border-right-color: @tooltip-arrow-color;
+}
+
+.tooltip-arrow-left-border() {
+  border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+  border-left-color: @tooltip-arrow-color;
+}
+
 .tooltip {
   position: absolute;
   z-index: @zindex-tooltip;
@@ -34,14 +68,12 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  padding: 3px 8px;
-  // max-width: @tooltip-max-width;
-  width: fit-content;
+  padding: @size-4 @size-8;
+  max-width: @tooltip-max-width;
   border-radius: @tooltip-radius;
   background-color: @tooltip-background-default;
   color: @tooltip-color-default;
   text-align: center;
-  text-wrap: balance;
   white-space: pre-wrap;
 }
 
@@ -59,58 +91,50 @@
     bottom: 0;
     left: 50%;
     margin-left: calc(@tooltip-arrow-width * -1);
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
+    .tooltip-arrow-top-border();
   }
   &.top-left .tooltip-arrow,
   &.bs-tooltip-top-left .tooltip-arrow {
     right: @tooltip-arrow-width;
     bottom: 0;
     margin-bottom: calc(@tooltip-arrow-width * -1);
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
+    .tooltip-arrow-top-border();
   }
   &.top-right .tooltip-arrow,
   &.bs-tooltip-top-right .tooltip-arrow {
     bottom: 0;
     left: @tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
+    .tooltip-arrow-top-border();
   }
   &.right .tooltip-arrow,
   &.bs-tooltip-right .tooltip-arrow {
     top: 50%;
     left: 0;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-right-color: @tooltip-arrow-color;
+    .tooltip-arrow-right-border();
   }
   &.left .tooltip-arrow,
   &.bs-tooltip-left .tooltip-arrow {
     top: 50%;
     right: 0;
-    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-left-color: @tooltip-arrow-color;
+    .tooltip-arrow-left-border();
   }
   &.bottom .tooltip-arrow,
   &.bs-tooltip-bottom .tooltip-arrow {
     top: 0;
     left: 50%;
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: @tooltip-arrow-color;
+    .tooltip-arrow-bottom-border();
   }
   &.bottom-left .tooltip-arrow,
   &.bs-tooltip-bottom-left .tooltip-arrow {
     top: 0;
     right: @tooltip-arrow-width;
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: @tooltip-arrow-color;
+    .tooltip-arrow-bottom-border();
   }
   &.bottom-right .tooltip-arrow,
   &.bs-tooltip-bottom-right .tooltip-arrow {
     top: 0;
     left: @tooltip-arrow-width;
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: @tooltip-arrow-color;
+    .tooltip-arrow-bottom-border();
   }
 }