@c8y/style 1023.17.19 → 1023.22.2

package/variables/_forms-vars.less

@@ -22,7 +22,7 @@
 @form-control-placeholder-color:            var(--c8y-form-control-placeholder-color);
 @form-control-placeholder-font-style:       var(--c8y-form-control-placeholder-font-style);
 
-@form-control-disabled-opacity:             var(--c8y-form-control-disabled-opacity);
+@form-control-disabled-opacity:             var(--c8y-form-control-opacity-disabled);
 
 @form-control-background-disabled:          var(--c8y-form-control-background-disabled);
 @form-control-color-disabled:               var(--c8y-form-control-color-disabled);

package/variables/_forms-vars.scss

@@ -0,0 +1,98 @@
+@use 'layout-vars';
+@use 'components-vars';
+@use 'typography-vars';
+
+// label
+$form-label-text-transform:                 var(--c8y-form-label-text-transform);
+$form-label-font-weight:                    var(--c8y-form-label-font-weight);
+$form-label-font-size:                      var(--c8y-form-label-font-size);
+$form-label-color:                          var(--c8y-form-label-color);
+
+//legend
+$form-legend-color:                         var(--c8y-form-legend-color);
+$form-legend-text-transform:                var(--c8y-form-legend-text-transform);
+$form-legend-font-weight:                   var(--c8y-form-legend-font-weight);
+$form-legend-font-size:                     var(--c8y-form-legend-font-size);
+
+/* Form-control */
+$form-control-color-default:                var(--c8y-form-control-color-default);
+$form-control-background-default:           var(--c8y-form-control-background-default);
+$form-control-border-color-default:         var(--c8y-form-control-border-color-default);
+
+$form-control-border-color-focus:           var(--c8y-form-control-border-color-focus);
+$form-control-background-focus:             var(--c8y-form-control-background-focus);
+$form-control-color-focus:                  var(--c8y-form-control-color-focus);
+
+$form-control-placeholder-color:            var(--c8y-form-control-placeholder-color);
+$form-control-placeholder-font-style:       var(--c8y-form-control-placeholder-font-style);
+
+$form-control-disabled-opacity:             var(--c8y-form-control-disabled-opacity);
+
+$form-control-background-disabled:          var(--c8y-form-control-background-disabled);
+$form-control-color-disabled:               var(--c8y-form-control-color-disabled);
+
+
+
+$form-control-validation-error:             var(--palette-status-danger, var(--c8y-form-validation-color-error));
+$form-control-validation-warning:           var(--palette-status-warning, var(--c8y-form-validation-color-warning));
+$form-control-validation-success:           var(--palette-status-success, var(--c8y-form-validation-color-success));
+$form-control-validation-info:              var(--palette-status-info, var(--c8y-form-validation-color-info));
+$form-validation-bottom-margin:             var(--c8y-form-validation-bottom-margin);
+$form-control-icon-color:                   var(--c8y-form-control-icon-color);
+
+// Size and spacing
+$form-control-padding-base-vertical:        var(--c8y-form-control-padding-base-vertical);
+$form-control-padding-base-horizontal:      var(--c8y-form-control-padding-base-horizontal);
+$form-control-height-base:                  var(--c8y-form-control-height-base);
+
+$form-control-padding-small-vertical:       calc($form-control-padding-base-vertical * .75);
+$form-control-padding-small-horizontal:     calc($form-control-padding-base-horizontal * .75);
+$form-control-height-sm:                    var(--c8y-form-control-height-sm);
+$form-control-height-lg:                    var(--c8y-form-control-height-lg);
+$form-control-padding-large-vertical:       calc($form-control-padding-base-vertical * 1.25);
+$form-control-padding-large-horizontal:     calc($form-control-padding-base-horizontal * 1.25);
+
+//Border
+$form-control-border-width:                 var(--c8y-form-control-border-width, 1px);
+$form-control-border-radius:                var(--c8y-form-control-border-radius);
+
+// typography
+$form-control-font-family:                  var(--font-family-base, var(--c8y-form-control-font-family));
+$form-control-font-weight:                  var(--c8y-form-control-font-weight);
+$form-control-line-height:                  var(--c8y-form-control-line-height);
+$form-control-placeholder-font-style:       var(--c8y-form-control-placeholder-font-style);
+
+// Checkboxes
+$checkbox-size:                             layout-vars.$size-16;
+$checkbox-icon-size:                        10px;
+
+//misc
+$cursor-disabled:                           not-allowed;
+
+/* Input type="range" */
+$thumb-radius:                              24px;
+$thumb-height:                              24px;
+$thumb-width:                               $thumb-height;
+$thumb-border-width:                        0;
+$track-width:                               100%;
+$track-height:                              8px;
+$track-border-width:                        1px;
+$track-radius:                              4px;
+
+$track-color:                               $form-control-background-default;
+$track-focus-color:                         $form-control-border-color-focus;
+$thumb-color:                               components-vars.$component-background-default;
+$thumb-border-color:                        $form-control-border-color-default;
+$track-border-color:                        transparent;
+
+// SWITCH
+$switch-width:                              var(--c8y-switch-width);
+$switch-height:                             var(--c8y-switch-height);
+$switch-radius:                             var(--c8y-switch-radius);
+$switch-sm:                                 typography-vars.$line-height-computed;
+$switch-background-default:                 var(--c8y-switch-background-default);
+$switch-background-active:                  var(--c8y-switch-background-active);
+
+// ** input-group addons
+$input-group-addon-background-default:      $form-control-border-color-default;
+$input-group-addon-border-color:            $form-control-border-color-default;

package/variables/_label-vars.less

@@ -1,4 +1,7 @@
-/* TODO: Remove after Codex launch. will be replaced by Tag */
+/* DEPRECATED: This file should be removed after migrating all 572 usages to the Tag component.
+ * Migration pending - Codex launch requirement.
+ * Search codebase for "class.*label" to find instances.
+ */
 
 //** Default label background color
 @label-background-default:                              @gray-80;
@@ -6,7 +9,7 @@
 // TODO: remove the fix after updating the branding feature with the new shades of the primary color
 // @label-background-primary:                              @brand-80;
 // @label-color-primary:                                   @brand-20;
-@label-background-primary:                              @brand-primary;
+@label-background-primary:                              var(--brand-primary, var(--c8y-brand-primary));
 @label-color-primary:                                   @palette-high;
 
 //** Success label background color

package/variables/_label-vars.scss

@@ -0,0 +1,37 @@
+@use 'color-vars' as *;
+
+/* DEPRECATED: This file should be removed after migrating all 572 usages to the Tag component.
+ * Migration pending - Codex launch requirement.
+ * Search codebase for "class.*label" to find instances.
+ */
+
+//** Default label background color
+$label-background-default:                              $gray-80;
+//** Primary label background color
+// TODO: remove the fix after updating the branding feature with the new shades of the primary color
+// $label-background-primary:                              $brand-80;
+// $label-color-primary:                                   $brand-20;
+$label-background-primary:                              var(--brand-primary, var(--c8y-brand-primary));
+$label-color-primary:                                   $palette-high;
+
+//** Success label background color
+$label-background-success:                              $status-success-light;
+$label-color-success:                                   $status-success-dark;
+//** Info label background color
+$label-background-info:                                 $status-info-light;
+$label-color-info:                                      $status-info-dark;
+//** Warning label background color
+$label-background-warning:                              $status-warning-light;
+$label-color-warning:                                   $status-warning-dark;
+//** Danger label background color
+$label-background-danger:                               $status-danger-light;
+$label-color-danger:                                    $status-danger-dark;
+
+//** Default label text color
+$label-color-light:                                     $palette-high;
+//** Default label text color
+$label-color-dark:                                      $text-color;
+//** Default text color of a linked label
+$label-link-hover-color:                                $palette-high;
+
+

package/variables/_layout-vars.less

@@ -1,19 +1,35 @@
 /* GLOBAL MARGINS AND SPACING */
 
-/* MARGINS */
-@margin-base: var(--c8y-unit-base); // 8px
+/* SIZE TOKENS */
+@size-base: var(--c8y-unit-base); // 8px
+@size-4: calc(var(--c8y-unit-base) * 0.5); // 4px
+@size-5: calc(var(--c8y-unit-base) * 0.625); // 5px (off-grid for legacy compatibility)
+@size-8: @size-base; // 8px
+@size-10: calc(var(--c8y-unit-base) * 1.25); // 10px (off-grid for legacy compatibility)
+@size-16: calc(var(--c8y-unit-base) * 2); // 16px
+@size-20: calc(var(--c8y-unit-base) * 2.5); // 20px (off-grid for legacy compatibility)
+@size-24: calc(var(--c8y-unit-base) * 3); // 24px
+@size-32: calc(var(--c8y-unit-base) * 4); // 32px
+@size-40: calc(var(--c8y-unit-base) * 5); // 40px
+@size-48: calc(var(--c8y-unit-base) * 6); // 48px
+@size-56: calc(var(--c8y-unit-base) * 7); // 56px
+@size-64: calc(var(--c8y-unit-base) * 8); // 64px
+@size-72: calc(var(--c8y-unit-base) * 9); // 72px
+@size-80: calc(var(--c8y-unit-base) * 10); // 80px
 
-@margin-4: calc(var(--c8y-unit-base) * 0.5); // 4px
-@margin-8: @margin-base; // 8px
-@margin-16: calc(var(--c8y-unit-base) * 2); // 16px
-@margin-24: calc(var(--c8y-unit-base) * 3); // 24px
-@margin-32: calc(var(--c8y-unit-base) * 4); // 32px
-@margin-40: calc(var(--c8y-unit-base) * 5); // 40px
-@margin-48: calc(var(--c8y-unit-base) * 6);
-@margin-56: calc(var(--c8y-unit-base) * 7);
-@margin-64: calc(var(--c8y-unit-base) * 8);
-@margin-72: calc(var(--c8y-unit-base) * 9);
-@margin-80: calc(var(--c8y-unit-base) * 10);
+/* DEPRECATED - Backwards compatibility aliases (use @size-* instead) */
+@margin-base: @size-base;
+@margin-4: @size-4;
+@margin-8: @size-8;
+@margin-16: @size-16;
+@margin-24: @size-24;
+@margin-32: @size-32;
+@margin-40: @size-40;
+@margin-48: @size-48;
+@margin-56: @size-56;
+@margin-64: @size-64;
+@margin-72: @size-72;
+@margin-80: @size-80;
 
 /* NAVIGATOR */
 

package/variables/_layout-vars.scss

@@ -0,0 +1,110 @@
+/* GLOBAL SPACING SCALE */
+
+/* SIZE TOKENS - Unit-based spacing scale (8px base unit) */
+$size-base: var(--c8y-unit-base); // 8px
+
+$size-4: calc(var(--c8y-unit-base) * 0.5); // 4px
+$size-5: calc(var(--c8y-unit-base) * 0.625); // 5px (off-grid for legacy compatibility)
+$size-8: $size-base; // 8px
+$size-10: calc(var(--c8y-unit-base) * 1.25); // 10px (off-grid for legacy compatibility)
+$size-16: calc(var(--c8y-unit-base) * 2); // 16px
+$size-20: calc(var(--c8y-unit-base) * 2.5); // 20px (off-grid for legacy compatibility)
+$size-24: calc(var(--c8y-unit-base) * 3); // 24px
+$size-32: calc(var(--c8y-unit-base) * 4); // 32px
+$size-40: calc(var(--c8y-unit-base) * 5); // 40px
+$size-48: calc(var(--c8y-unit-base) * 6); // 48px
+$size-56: calc(var(--c8y-unit-base) * 7); // 56px
+$size-64: calc(var(--c8y-unit-base) * 8); // 64px
+$size-72: calc(var(--c8y-unit-base) * 9); // 72px
+$size-80: calc(var(--c8y-unit-base) * 10); // 80px
+
+/* DEPRECATED - Backwards compatibility aliases (use $size-* instead) */
+$margin-base: $size-base;
+$margin-4: $size-4;
+$margin-8: $size-8;
+$margin-16: $size-16;
+$margin-24: $size-24;
+$margin-32: $size-32;
+$margin-40: $size-40;
+$margin-48: $size-48;
+$margin-56: $size-56;
+$margin-64: $size-64;
+$margin-72: $size-72;
+$margin-80: $size-80;
+
+/* NAVIGATOR */
+
+$navigatorWidth: var(--c8y-navigator-panel-width, 240px);
+$navigatorWidth--sm: calc(100% - 35px);
+$navigator-title-height: calc(var(--c8y-unit-base) * 6);
+$navigator-top-padding: 0;
+$navigator-padding-bottom: calc(var(--c8y-unit-base) * 3);
+
+/* TOP MAIN BAR */
+$headerHeight: calc(var(--c8y-unit-base) * 8);
+$header-bar-height: $headerHeight;
+
+/* MEDIA QUERIES BREAKPOINTS */
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs: 480px;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min: $screen-xs;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone: $screen-xs-min;
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm: 768px;
+$screen-sm-min: $screen-sm;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet: $screen-sm-min;
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md: 992px;
+$screen-md-min: $screen-md;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop: $screen-md-min;
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg: 1200px;
+$screen-lg-min: $screen-lg;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop: $screen-lg-min;
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1);
+$screen-sm-max: ($screen-md-min - 1);
+$screen-md-max: ($screen-lg-min - 1);
+// set maximum width for specific uses
+$screen-max-width: 1400px;
+
+//== Grid system
+//## Define your custom responsive grid.
+//** Number of columns in the grid.
+$grid-columns: 12;
+
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width: $margin-24;
+
+// Grid float breakpoint - Must be defined before usage
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint: $screen-lg;
+
+// Navbar collapse
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
+
+//== Container sizes
+//## Define the maximum width of `.container` for different screen sizes.
+// Small screen / tablet
+$container-tablet: calc(720px + $grid-gutter-width);
+//** For `$screen-sm-min` and up.
+$container-sm: $container-tablet;
+// Medium screen / desktop
+$container-desktop: calc(940px + $grid-gutter-width);
+//** For `$screen-md-min` and up.
+$container-md: $container-desktop;
+// Large screen / wide desktop
+$container-large-desktop: calc(1140px + $grid-gutter-width);
+//** For `$screen-lg-min` and up.
+$container-lg: $container-large-desktop;

package/variables/_map-vars.scss

@@ -0,0 +1,12 @@
+@use 'color-vars' as *;
+
+$use-relative-paths: false !default;
+
+$map-full-width-top:                            140px !important;
+
+$map-icons-path:                                if($use-relative-paths, '../img/', 'img/');
+$critical-marker:                               '#{$map-icons-path}critical-marker-icon.png';
+$major-marker:                                  '#{$map-icons-path}major-marker-icon.png';
+$minor-marker:                                  '#{$map-icons-path}minor-marker-icon.png';
+$warning-marker:                                '#{$map-icons-path}warning-marker-icon.png';
+$normal-marker:                                 '#{$map-icons-path}normal-marker-icon.png';

package/variables/_modal-vars.less

@@ -6,5 +6,5 @@
 @modal-lg:                                      var(--c8y-modal-size-lg);
 @modal-md:                                      var(--c8y-modal-size-md);
 @modal-sm:                                      var(--c8y-modal-size-sm);
-@modal-inner-scroll-height:                     var(--c8y-inner-scroll-height-default);
-@modal-inner-scroll-sm-height:                  var(--c8y-inner-scroll-height-sm);
+@modal-inner-scroll-height:                     var(--c8y-modal-inner-scroll-height-default);
+@modal-inner-scroll-sm-height:                  var(--c8y-modal-inner-scroll-height-sm);

package/variables/_modal-vars.scss

@@ -0,0 +1,13 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+
+$modal-backdrop-background:                     var(--c8y-modal-backdrop-background);
+$modal-backdrop-opacity:                        var(--c8y-modal-backdrop-opacity);
+
+$modal-border-radius:                           var(--c8y-modal-border-radius);
+
+$modal-lg:                                      var(--c8y-modal-size-lg);
+$modal-md:                                      var(--c8y-modal-size-md);
+$modal-sm:                                      var(--c8y-modal-size-sm);
+$modal-inner-scroll-height:                     var(--c8y-inner-scroll-height-default);
+$modal-inner-scroll-sm-height:                  var(--c8y-inner-scroll-height-sm);

package/variables/_navbar-vars.less

@@ -19,16 +19,15 @@
 @navlink-background-hover:                      var(--c8y-navlink-background-hover);
 @navlink-background-focus:                      var(--c8y-navlink-background-focus);
 
-@navlink-color-default:                         var(--c8y-navbar-color-link);
-@navlink-color-active:                          var(--c8y-navbar-color-active);
-@navlink-color-hover:                           var(--c8y-navbar-color-link-hover);
-@navlink-color-focus:                           var(--c8y-navbar-color-link-hover);
+@navlink-color-default:                         var(--c8y-navlink-color-default);
+@navlink-color-active:                          var(--c8y-navlink-color-active);
+@navlink-color-hover:                           var(--c8y-navlink-color-hover);
+@navlink-color-focus:                           var(--c8y-navlink-color-focus);
 
 @navlink-padding:                               var(--c8y-navlink-padding-vertical) var(--c8y-navlink-padding-horizontal);
 
 
 @nav-tabs-background-default:                   var(--c8y-nav-tabs-background-default);
-@nav-tabs-background-actions:                   var(--c8y-nav-tabs-background-actions);
 @nav-tabs-background-hover:                     var(--c8y-nav-tabs-background-hover);
 @nav-tabs-background-active:                    var(--c8y-nav-tabs-background-active);
 @nav-tabs-background-focus:                     var(--c8y-nav-tabs-background-focus);
@@ -36,7 +35,7 @@
 @nav-tabs-color-default:                        var(--c8y-nav-tabs-color-default);
 @nav-tabs-color-hover:                          var(--c8y-nav-tabs-color-hover);
 @nav-tabs-color-active:                         var(--c8y-nav-tabs-color-active);
-@nav-tabs-color-focus:                          var(--c8y-nav-tabs-color-active);
+@nav-tabs-color-focus:                          var(--c8y-nav-tabs-color-focus);
 
 @nav-tabs-border-color-default:                 var(--c8y-nav-tabs-border-color-default);
 @nav-tabs-border-color-active:                  var(--c8y-nav-tabs-border-color-active);
@@ -47,6 +46,7 @@
 @nav-tabs-icon-color-default:                   var(--c8y-nav-tabs-icon-color-default);
 @nav-tabs-icon-color-hover:                     var(--c8y-nav-tabs-icon-color-hover);
 @nav-tabs-icon-color-active:                    var(--c8y-nav-tabs-icon-color-active);
+@nav-tabs-icon-color-focus:                     var(--c8y-nav-tabs-icon-color-focus);
 
 @nav-tabs-padding:                              var(--c8y-nav-tabs-padding-vertical) var(--c8y-nav-tabs-padding-horizontal);
 
@@ -56,6 +56,14 @@
 
 /* NAVPILLS */
 @nav-pills-padding:                             var(--c8y-nav-pills-padding-vertical) var(--c8y-nav-pills-padding-horizontal);
+@nav-pills-border-radius:                       var(--c8y-nav-pills-border-radius);
+
+@nav-pills-background-default:                  var(--c8y-nav-pills-background-default);
 @nav-pills-background-active:                   var(--c8y-nav-pills-background-active);
+@nav-pills-background-hover:                    var(--c8y-nav-pills-background-hover);
+@nav-pills-background-focus:                    var(--c8y-nav-pills-background-focus);
+
+@nav-pills-color-default:                       var(--c8y-nav-pills-color-default);
 @nav-pills-color-active:                        var(--c8y-nav-pills-color-active);
-@nav-pills-border-radius:                       var(--c8y-nav-pills-border-radius);
+@nav-pills-color-hover:                         var(--c8y-nav-pills-color-hover);
+@nav-pills-color-focus:                         var(--c8y-nav-pills-color-focus);

package/variables/_navbar-vars.scss

@@ -0,0 +1,72 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+
+$navbar-height:                                 var(--c8y-navbar-height);
+$navbar-margin-bottom:                          var(--c8y-navbar-margin-bottom);
+
+$navbar-background-default:                     var(--c8y-navbar-background-default);
+$navbar-color-default:                          var(--c8y-navbar-color-default);
+$navbar-border-color:                           var(--c8y-navbar-border-color);
+
+$navbar-padding-horizontal:                     calc($grid-gutter-width * .5);
+$navbar-padding-vertical:                       calc($size-16 - 2px);
+$navbar-collapse-max-height:                    340px;
+
+// c8y-nav-stacked
+$nav-stacked-active-bg:                         $gray-90;
+$nav-stacked-color-active:                      $text-color;
+
+/* NAVLINK */
+$navlink-background-default:                    var(--c8y-navlink-background-default);
+$navlink-background-active:                     var(--c8y-navlink-background-active);
+$navlink-background-hover:                      var(--c8y-navlink-background-hover);
+$navlink-background-focus:                      var(--c8y-navlink-background-focus);
+
+$navlink-color-default:                         var(--c8y-navbar-color-link);
+$navlink-color-active:                          var(--c8y-navbar-color-active);
+$navlink-color-hover:                           var(--c8y-navbar-color-link-hover);
+$navlink-color-focus:                           var(--c8y-navbar-color-link-hover);
+
+$navlink-padding:                               var(--c8y-navlink-padding-vertical) var(--c8y-navlink-padding-horizontal);
+
+
+$nav-tabs-background-default:                   var(--c8y-nav-tabs-background-default);
+$nav-tabs-background-actions:                   var(--c8y-nav-tabs-background-actions);
+$nav-tabs-background-hover:                     var(--c8y-nav-tabs-background-hover);
+$nav-tabs-background-active:                    var(--c8y-nav-tabs-background-active);
+$nav-tabs-background-focus:                     var(--c8y-nav-tabs-background-focus);
+
+$nav-tabs-color-default:                        var(--c8y-nav-tabs-color-default);
+$nav-tabs-color-hover:                          var(--c8y-nav-tabs-color-hover);
+$nav-tabs-color-active:                         var(--c8y-nav-tabs-color-active);
+$nav-tabs-color-focus:                          var(--c8y-nav-tabs-color-active);
+
+$nav-tabs-border-color-default:                 var(--c8y-nav-tabs-border-color-default);
+$nav-tabs-border-color-active:                  var(--c8y-nav-tabs-border-color-active);
+$nav-tabs-border-width-default:                 var(--c8y-nav-tabs-border-width-default);
+$nav-tabs-border-width-active:                  var(--c8y-nav-tabs-border-width-active);
+
+$nav-tabs-icon-size:                            var(--c8y-nav-tabs-icon-size);
+$nav-tabs-icon-color-default:                   var(--c8y-nav-tabs-icon-color-default);
+$nav-tabs-icon-color-hover:                     var(--c8y-nav-tabs-icon-color-hover);
+$nav-tabs-icon-color-active:                    var(--c8y-nav-tabs-icon-color-active);
+
+$nav-tabs-padding:                              var(--c8y-nav-tabs-padding-vertical) var(--c8y-nav-tabs-padding-horizontal);
+
+//tabs vertical
+$nav-tabs-vertical-width:                       var(--c8y-nav-tabs-vertical-width);
+$nav-tabs-vertical-padding:                     var(--c8y-nav-tabs-vertical-padding-vertical) var(--c8y-nav-tabs-vertical-padding-horizontal);
+
+/* NAVPILLS */
+$nav-pills-padding:                             var(--c8y-nav-pills-padding-vertical) var(--c8y-nav-pills-padding-horizontal);
+$nav-pills-border-radius:                       var(--c8y-nav-pills-border-radius);
+
+$nav-pills-background-default:                  var(--c8y-nav-pills-background-default);
+$nav-pills-background-active:                   var(--c8y-nav-pills-background-active);
+$nav-pills-background-hover:                    var(--c8y-nav-pills-background-hover);
+$nav-pills-background-focus:                    var(--c8y-nav-pills-background-focus);
+
+$nav-pills-color-default:                       var(--c8y-nav-pills-color-default);
+$nav-pills-color-active:                        var(--c8y-nav-pills-color-active);
+$nav-pills-color-hover:                         var(--c8y-nav-pills-color-hover);
+$nav-pills-color-focus:                         var(--c8y-nav-pills-color-focus);

package/variables/_navigator.scss

@@ -0,0 +1,8 @@
+$navigator-font-family:                           var(--navigator-font-family, var(--c8y-navigator-font-family));
+$navigator-font-size:                             var(--c8y-navigator-font-size);
+$navigator-app-name-size:                         var(--c8y-navigator-app-name-size);
+$navigator-app-logo-size:                         var(--navigator-app-icon-size, var(--c8y-navigator-app-icon-size));
+
+$navigator-active-border-width:                   var(--c8y-navigator-active-border-width);
+
+$open-menu-time-type:                             .4s ease-in-out;

package/variables/_page-sticky-header.scss

@@ -0,0 +1,4 @@
+@use 'color-vars' as *;
+@use 'components-vars' as *;
+
+$page-sticky-header-height: var(--c8y-page-sticky-header-height);

package/variables/_pagination-vars.scss

@@ -0,0 +1,30 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+
+$pagination-color:                              $component-color-link;
+$pagination-bg:                                 $component-background-default;
+$pagination-border:                             $component-border-color;
+
+$pagination-hover-color:                        $component-color-link-hover;
+$pagination-hover-bg:                           $component-background-default;
+$pagination-hover-border:                       $component-border-color;
+
+$pagination-color-active:                       $palette-high;
+$pagination-active-bg:                          $component-brand-primary;
+$pagination-active-border:                      $component-brand-primary;
+
+$pagination-disabled-color:                     $component-color-disabled;
+$pagination-disabled-bg:                        $component-background-default;
+$pagination-disabled-border:                    $component-color-disabled;
+
+$pager-bg:                                      $pagination-bg;
+$pager-border:                                  $pagination-border;
+
+$pager-hover-bg:                                $pagination-hover-bg;
+
+$pager-active-bg:                               $pagination-active-bg;
+$pager-color-active:                            $pagination-color-active;
+
+$pager-disabled-color:                          $pagination-disabled-color;
+
+$pager-border-radius:                           $size-16;

package/variables/_panel-vars.less

@@ -9,8 +9,8 @@
 @panel-default-heading-bg:                      transparent;
 
 @panel-primary-text:                            @palette-high;
-@panel-primary-border:                          @brand-primary;
-@panel-primary-heading-bg:                      @brand-primary;
+@panel-primary-border:                          var(--brand-primary, var(--c8y-brand-primary));
+@panel-primary-heading-bg:                      var(--brand-primary, var(--c8y-brand-primary));
 
 @panel-success-text:                            @state-success-text;
 @panel-success-border:                          @state-success-border;

package/variables/_panel-vars.scss

@@ -0,0 +1,40 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+
+$panel-border-color:                            $component-border-color;
+
+//** Border color for elements within panels
+$panel-inner-border:                            $component-border-color;
+$panel-footer-bg:                               $component-background-default;
+
+$panel-default-text:                            $component-color-default;
+$panel-default-border:                          $component-border-color;
+$panel-default-heading-bg:                      transparent;
+
+$panel-primary-text:                            $palette-high;
+$panel-primary-border:                          var(--brand-primary, var(--c8y-brand-primary));
+$panel-primary-heading-bg:                      var(--brand-primary, var(--c8y-brand-primary));
+
+$panel-success-text:                            $state-success-text;
+$panel-success-border:                          $state-success-border;
+$panel-success-heading-bg:                      $state-success-bg;
+
+$panel-info-text:                               $state-info-text;
+$panel-info-border:                             $state-info-border;
+$panel-info-heading-bg:                         $state-info-bg;
+
+$panel-warning-text:                            $state-warning-text;
+$panel-warning-border:                          $state-warning-border;
+$panel-warning-heading-bg:                      $state-warning-bg;
+
+$panel-danger-text:                             $state-danger-text;
+$panel-danger-border:                           $state-danger-border;
+$panel-danger-heading-bg:                       $state-danger-bg;
+
+$panel-bg:                                      $component-background-default;
+$panel-body-padding:                            $size-16;
+$panel-heading-height:                          $size-40;
+$panel-heading-padding:                         $size-base $size-16;
+$panel-footer-padding:                          $panel-heading-padding;
+$panel-border-radius:                           0;
+$panel-border-width:                            0;

package/variables/_popover-vars.scss

@@ -0,0 +1,23 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+
+$popover-background-default:                      var(--c8y-popover-background-default);
+$popover-color-default:                           var(--c8y-popover-color-default);
+$popover-icon-color:                              var(--c8y-popover-icon-color);
+
+$popover-border-color:                            var(--c8y-popover-border-color);
+
+$popover-link-color:                              var(--c8y-popover-color-link);
+$popover-link-color-hover:                        var(--c8y-popover-color-link-hover);
+
+$popover-label-color:                             var(--c8y-popover-label-color);
+
+$popover-max-width:                               var(--c8y-popover-width);
+
+$popover-border-radius:                           var(--c8y-popover-border-radius);
+
+$popover-arrow-width:                             var(--c8y-popover-arrow-width);
+
+$popover-arrow-outer-width:                       calc($popover-arrow-width + 1px);
+
+$popover-padding:                                 var(--c8y-popover-padding);

package/variables/_progress-bars-vars.less

@@ -3,14 +3,14 @@
 //** Progress bar text color
 @progress-bar-color:                            @palette-high;
 //** Default progress bar color
-@progress-bar-bg:                               @brand-primary;
+@progress-bar-bg:                               var(--brand-primary, var(--c8y-brand-primary));
 //** Success progress bar color
-@progress-bar-success-bg:                       @status-success;
+@progress-bar-success-bg:                       var(--c8y-palette-status-success);
 //** Warning progress bar color
-@progress-bar-warning-bg:                       @status-warning;
+@progress-bar-warning-bg:                       var(--c8y-palette-status-warning);
 //** Danger progress bar color
-@progress-bar-danger-bg:                        @status-danger;
+@progress-bar-danger-bg:                        var(--c8y-palette-status-danger);
 //** Info progress bar color
-@progress-bar-info-bg:                          @status-info;
+@progress-bar-info-bg:                          var(--c8y-palette-status-info);
 //** Variable for setting rounded corners on progress bar.
 @progress-border-radius:                        10px;