@c8y/style 1023.14.33 → 1023.14.37

package/variables/_buttons-vars.scss

@@ -0,0 +1,107 @@
+@use 'color-vars' as *;
+
+$btn-font-family:                      var(--c8y-btn-font-family);
+$btn-font-weight:                      var(--c8y-btn-font-weight);
+$btn-font-size-base:                   var(--c8y-btn-font-size-base);
+$btn-font-size-large:                  var(--c8y-btn-font-size-large);
+$btn-font-size-small:                  var(--c8y-btn-font-size-small);
+$btn-font-size-xs:                     var(--c8y-btn-font-size-xs);
+$btn-line-height-base:                 var(--c8y-btn-line-height-base);
+$btn-line-height-large:                var(--c8y-btn-line-height-large);
+$btn-line-height-small:                var(--c8y-btn-line-height-small);
+$btn-line-height-xs:                   var(--c8y-btn-line-height-xs);
+$btn-padding-vertical:                 var(--c8y-btn-padding-base-vertical);
+$btn-padding-horizontal:               var(--c8y-btn-padding-base-horizontal);
+$btn-padding-large-vertical:           var(--c8y-btn-padding-large-vertical);
+$btn-padding-large-horizontal:         var(--c8y-btn-padding-large-horizontal);
+$btn-padding-small-vertical:           var(--c8y-btn-padding-small-vertical);
+$btn-padding-small-horizontal:         var(--c8y-btn-padding-small-horizontal);
+$btn-padding-xs-vertical:              var(--c8y-btn-padding-xs-vertical);
+$btn-padding-xs-horizontal:            var(--c8y-btn-padding-xs-horizontal);
+$btn-padding-icon-horizontal:          var(--c8y-btn-padding-icon-horizontal);
+$btn-padding-icon-vertical:            var(--c8y-btn-padding-icon-vertical);
+
+$btn-border-radius-base:               calc( var(--btn-border-radius-base, var(--c8y-btn-border-radius-base)) * 1px );
+$btn-border-radius-large:              var(--c8y-btn-border-radius-large);
+$btn-border-radius-small:              var(--c8y-btn-border-radius-small);
+$btn-border-radius-xs:                 var(--c8y-btn-border-radius-xs);
+$btn-border-radius-pill:               var(--c8y-btn-border-radius-pill);
+$btn-group-border-radius:              var(--c8y-btn-group-border-radius);
+
+$btn-shadow:                           var(--c8y-btn-shadow-default);
+$btn-transition:                       var(--c8y-btn-transition-default);
+
+// Switch
+$switch-width:                         60px;
+$switch-height:                        30px;
+$switch-radius:                        30px;
+$switch-sm:                            20px;
+$padding-btn-xs-horizontal:            12px;
+$padding-btn-small-horizontal:         14px;
+
+// Colors
+$btn-default-color-default:                           var(--c8y-btn-default-color-default);
+$btn-default-background-default:                      var(--c8y-btn-default-background-default);
+$btn-default-border-color-default:                    var(--c8y-btn-default-border-color-default);
+
+$btn-default-color-hover:                             var(--c8y-btn-default-color-hover);
+$btn-default-background-hover:                        var(--c8y-btn-default-background-hover);
+$btn-default-border-color-hover:                      var(--c8y-btn-default-border-color-hover);
+
+$btn-default-color-focus:                             var(--c8y-btn-default-color-focus);
+$btn-default-background-focus:                        var(--c8y-btn-default-background-focus);
+$btn-default-border-color-focus:                      var(--c8y-btn-default-border-color-focus);
+
+$btn-default-color-active:                            var(--c8y-btn-default-color-active);
+$btn-default-background-active:                       var(--c8y-btn-default-background-active);
+$btn-default-border-color-active:                     var(--c8y-btn-default-border-color-active);
+
+$btn-primary-color-default:                           var(--c8y-btn-primary-color-default);
+$btn-primary-background-default:                      var(--c8y-btn-primary-background-default);
+$btn-primary-border-color-default:                    var(--c8y-btn-primary-border-color-default);
+
+$btn-primary-color-hover:                             var(--c8y-btn-primary-color-hover);
+$btn-primary-background-hover:                        var(--c8y-btn-primary-background-hover);
+$btn-primary-border-color-hover:                      var(--c8y-btn-primary-border-color-hover);
+
+$btn-primary-color-focus:                             var(--c8y-btn-primary-color-focus);
+$btn-primary-background-focus:                        var(--c8y-btn-primary-background-focus);
+$btn-primary-border-color-focus:                      var(--c8y-btn-primary-border-color-focus);
+
+$btn-primary-color-active:                            var(--c8y-btn-primary-color-active);
+$btn-primary-background-active:                       var(--c8y-btn-primary-background-active);
+$btn-primary-border-color-active:                     var(--c8y-btn-primary-border-color-active);
+
+$btn-accent-color-default:                            var(--c8y-btn-accent-color-default);
+$btn-accent-background-default:                       var(--c8y-btn-accent-background-default);
+$btn-accent-border-color-default:                     var(--c8y-btn-accent-border-color-default);
+
+$btn-accent-color-hover:                             var(--c8y-btn-accent-color-hover);
+$btn-accent-background-hover:                        var(--c8y-btn-accent-background-hover);
+$btn-accent-border-color-hover:                      var(--c8y-btn-accent-border-color-hover);
+
+$btn-accent-color-focus:                             var(--c8y-btn-accent-color-focus);
+$btn-accent-background-focus:                        var(--c8y-btn-accent-background-focus);
+$btn-accent-border-color-focus:                      var(--c8y-btn-accent-border-color-focus);
+
+$btn-accent-color-active:                            var(--c8y-btn-accent-color-active);
+$btn-accent-background-active:                       var(--c8y-btn-accent-background-active);
+$btn-accent-border-color-active:                     var(--c8y-btn-accent-border-color-active);
+
+$btn-danger-color-default:                            var(--c8y-btn-danger-color-default);
+$btn-danger-background-default:                       var(--c8y-btn-danger-background-default);
+$btn-danger-border-color-default:                     var(--c8y-btn-danger-border-color-default);
+
+$btn-danger-color-hover:                              var(--c8y-btn-danger-color-hover);
+$btn-danger-background-hover:                         var(--c8y-btn-danger-background-hover);
+$btn-danger-border-color-hover:                       var(--c8y-btn-danger-border-color-hover);
+
+$btn-danger-color-focus:                              var(--c8y-btn-danger-color-focus);
+$btn-danger-background-focus:                         var(--c8y-btn-danger-background-focus);
+$btn-danger-border-color-focus:                       var(--c8y-btn-danger-border-color-focus);
+
+$btn-danger-color-active:                             var(--c8y-btn-danger-color-active);
+$btn-danger-background-active:                        var(--c8y-btn-danger-background-active);
+$btn-danger-border-color-active:                      var(--c8y-btn-danger-border-color-active);
+
+$btn-link-disabled-color:                             $component-color-disabled;

package/variables/_c8y-action-bar-vars.less

@@ -8,6 +8,6 @@
 @action-bar-color-actions:                           var(--action-bar-color-actions, var(--c8y-action-bar-color-actions));
 @action-bar-color-actions-hover:                     var(--action-bar-color-actions-hover, var(--c8y-action-bar-color-actions-hover));
 
-@action-bar-actions-opacity:                         var(--action-bar-actions-opacity, var(--c8y-action-bar-actions-opacity));
+@action-bar-actions-opacity:                         var(--action-bar-actions-opacity, var(--c8y-action-bar-opacity-actions));
 @action-bar-disabled-opacity:                        var(--action-bar-opacity-disabled, var(--c8y-action-bar-opacity-disabled));
 @action-bar-icon-color:                              var(--action-bar-icon-color, var(--c8y-action-bar-icon-color));

package/variables/_c8y-action-bar-vars.scss

@@ -0,0 +1,15 @@
+@use 'color-vars' as *;
+
+$action-bar-background-default:                      var(--action-bar-background-default, var(--c8y-action-bar-background-default));
+$action-bar-color-default:                           var(--action-bar-color-default, var(--c8y-action-bar-color-default));
+$action-bar-color-text-muted:                        var(--action-bar-color-text-muted, var(--c8y-action-bar-color-text-muted));
+
+$action-bar-border-color:                            var(--action-bar-border-color, var(--c8y-action-bar-border-color));
+
+$action-bar-color-focus:                             var(--action-bar-color-focus, var(--c8y-action-bar-color-focus));
+$action-bar-color-actions:                           var(--action-bar-color-actions, var(--c8y-action-bar-color-actions));
+$action-bar-color-actions-hover:                     var(--action-bar-color-actions-hover, var(--c8y-action-bar-color-actions-hover));
+
+$action-bar-actions-opacity:                         var(--action-bar-actions-opacity, var(--c8y-action-bar-actions-opacity));
+$action-bar-disabled-opacity:                        var(--action-bar-opacity-disabled, var(--c8y-action-bar-opacity-disabled));
+$action-bar-icon-color:                              var(--action-bar-icon-color, var(--c8y-action-bar-icon-color));

package/variables/_c8y-icon-vars.scss

@@ -0,0 +1,199 @@
+// dark icons
+$c8y-icon-dark-aab-icon-model: "\e900";
+$c8y-icon-dark-aab-icon-template-model: "\e901";
+$c8y-icon-dark-accounts: "\e902";
+$c8y-icon-dark-add-user: "\e903";
+$c8y-icon-dark-administration: "\e904";
+$c8y-icon-dark-alarm: "\e905";
+$c8y-icon-dark-alert-idle: "\e906";
+$c8y-icon-dark-alfabet: "\e907";
+$c8y-icon-dark-analytic-model: "\e908";
+$c8y-icon-dark-analytics-builder: "\e909";
+$c8y-icon-dark-apama-epl: "\e90a";
+$c8y-icon-dark-apama-machine-learning-workbench: "\e90b";
+$c8y-icon-dark-apama-machine-learning: "\e90c";
+$c8y-icon-dark-archive: "\e90d";
+$c8y-icon-dark-aris: "\e90e";
+$c8y-icon-dark-atom: "\e90f";
+$c8y-icon-dark-book: "\e910";
+$c8y-icon-dark-bookmark: "\e911";
+$c8y-icon-dark-bulb: "\e912";
+$c8y-icon-dark-business-rules: "\e913";
+$c8y-icon-dark-c8y-c: "\e914";
+$c8y-icon-dark-c8y-data: "\e915";
+$c8y-icon-dark-c8y-support: "\e916";
+$c8y-icon-dark-c8y: "\e917";
+$c8y-icon-dark-calendar: "\e918";
+$c8y-icon-dark-chart: "\e919";
+$c8y-icon-dark-circle-star: "\e91a";
+$c8y-icon-dark-cloud-container: "\e91b";
+$c8y-icon-dark-cockpit: "\e91c";
+$c8y-icon-dark-component: "\e91d";
+$c8y-icon-dark-connector-in: "\e91e";
+$c8y-icon-dark-connector-out: "\e91f";
+$c8y-icon-dark-css: "\e920";
+$c8y-icon-dark-cumulocity-iot: "\e921";
+$c8y-icon-dark-data-broker: "\e922";
+$c8y-icon-dark-data-explorer: "\e923";
+$c8y-icon-dark-data-hub: "\e924";
+$c8y-icon-dark-data-points: "\e925";
+$c8y-icon-dark-design: "\e926";
+$c8y-icon-dark-device-connect: "\e927";
+$c8y-icon-dark-device-control: "\e928";
+$c8y-icon-dark-device-management: "\e929";
+$c8y-icon-dark-device-profile: "\e92a";
+$c8y-icon-dark-device-protocols: "\e92b";
+$c8y-icon-dark-device: "\e92c";
+$c8y-icon-dark-dynamic-mapper: "\e92d";
+$c8y-icon-dark-e2e-monitoring: "\e92e";
+$c8y-icon-dark-energy: "\e92f";
+$c8y-icon-dark-enterprise: "\e930";
+$c8y-icon-dark-event-processing: "\e931";
+$c8y-icon-dark-events: "\e932";
+$c8y-icon-dark-fieldbus: "\e933";
+$c8y-icon-dark-find-map: "\e934";
+$c8y-icon-dark-firmware: "\e935";
+$c8y-icon-dark-grid-off: "\e936";
+$c8y-icon-dark-grid-on: "\e937";
+$c8y-icon-dark-group-add: "\e938";
+$c8y-icon-dark-group-open: "\e939";
+$c8y-icon-dark-group-remote-inactive: "\e93a";
+$c8y-icon-dark-group-remote-open: "\e93b";
+$c8y-icon-dark-group-remote: "\e93c";
+$c8y-icon-dark-group-smart-open: "\e93d";
+$c8y-icon-dark-group-smart: "\e93e";
+$c8y-icon-dark-group: "\e93f";
+$c8y-icon-dark-java: "\e940";
+$c8y-icon-dark-layers: "\e941";
+$c8y-icon-dark-layout: "\e942";
+$c8y-icon-dark-location: "\e943";
+$c8y-icon-dark-machine-portal: "\e944";
+$c8y-icon-dark-management: "\e945";
+$c8y-icon-dark-metering: "\e946";
+$c8y-icon-dark-mft: "\e947";
+$c8y-icon-dark-mobile-add: "\e948";
+$c8y-icon-dark-mobile-config: "\e949";
+$c8y-icon-dark-modules: "\e94a";
+$c8y-icon-dark-mycloud: "\e94b";
+$c8y-icon-dark-notification: "\e94c";
+$c8y-icon-dark-oee: "\e94d";
+$c8y-icon-dark-onnx: "\e94e";
+$c8y-icon-dark-overviews: "\e94f";
+$c8y-icon-dark-parameters-on: "\e950";
+$c8y-icon-dark-parameters: "\e951";
+$c8y-icon-dark-parking: "\e952";
+$c8y-icon-dark-report: "\e953";
+$c8y-icon-dark-reports: "\e954";
+$c8y-icon-dark-rocket: "\e955";
+$c8y-icon-dark-saas: "\e956";
+$c8y-icon-dark-security: "\e957";
+$c8y-icon-dark-shield: "\e958";
+$c8y-icon-dark-simulator: "\e959";
+$c8y-icon-dark-smart-rest: "\e95a";
+$c8y-icon-dark-smart-rules: "\e95b";
+$c8y-icon-dark-solution-accelerator: "\e95c";
+$c8y-icon-dark-streaming-analytics: "\e95d";
+$c8y-icon-dark-sub-tenants: "\e95e";
+$c8y-icon-dark-tenant-policies: "\e95f";
+$c8y-icon-dark-tools: "\e960";
+$c8y-icon-dark-tracking: "\e961";
+$c8y-icon-dark-usage-statistics: "\e962";
+$c8y-icon-dark-user: "\e963";
+$c8y-icon-dark-users: "\e964";
+$c8y-icon-dark-waste-bin: "\e965";
+$c8y-icon-dark-wm-api: "\e966";
+$c8y-icon-dark-wm-b2b: "\e967";
+$c8y-icon-dark-wm-dynamicapps: "\e968";
+$c8y-icon-dark-wm-integration: "\e969";
+$c8y-icon-dark-analytics-smart-rules: "\e96a";
+
+// light icons
+$c8y-icon-light-aab-icon-model: "\e900";
+$c8y-icon-light-aab-icon-template-model: "\e901";
+$c8y-icon-light-accounts: "\e902";
+$c8y-icon-light-add-user: "\e903";
+$c8y-icon-light-administration: "\e904";
+$c8y-icon-light-alarm: "\e905";
+$c8y-icon-light-alert-idle: "\e906";
+$c8y-icon-light-analytic-model: "\e907";
+$c8y-icon-light-analytics-builder: "\e908";
+$c8y-icon-light-apama-epl: "\e909";
+$c8y-icon-light-apama-machine-learning-workbench: "\e90a";
+$c8y-icon-light-apama-machine-learning: "\e90b";
+$c8y-icon-light-archive: "\e90c";
+$c8y-icon-light-atom: "\e90d";
+$c8y-icon-light-book: "";
+$c8y-icon-light-bulb: "\e90e";
+$c8y-icon-light-business-rules: "\e90f";
+$c8y-icon-light-c8y-data: "\e910";
+$c8y-icon-light-c8y-support: "\e911";
+$c8y-icon-light-calendar: "\e912";
+$c8y-icon-light-chart: "\e913";
+$c8y-icon-light-circle-star: "\e914";
+$c8y-icon-light-cloud-container: "\e915";
+$c8y-icon-light-cockpit: "\e916";
+$c8y-icon-light-component: "\e917";
+$c8y-icon-light-connector-in: "\e918";
+$c8y-icon-light-connector-out: "\e919";
+$c8y-icon-light-data-broker: "\e91a";
+$c8y-icon-light-data-explorer: "\e91b";
+$c8y-icon-light-data-hub: "\e91c";
+$c8y-icon-light-data-points: "\e91d";
+$c8y-icon-light-design: "\e91e";
+$c8y-icon-light-device-connect: "\e91f";
+$c8y-icon-light-device-control: "\e920";
+$c8y-icon-light-device-management: "\e921";
+$c8y-icon-light-device-profile: "\e922";
+$c8y-icon-light-device-protocols: "\e923";
+$c8y-icon-light-device: "\e924";
+$c8y-icon-light-dynamic-mapper: "\e925";
+$c8y-icon-light-energy: "\e926";
+$c8y-icon-light-enterprise: "\e927";
+$c8y-icon-light-event-processing: "\e928";
+$c8y-icon-light-events: "\e929";
+$c8y-icon-light-fieldbus: "\e92a";
+$c8y-icon-light-find-map: "\e92b";
+$c8y-icon-light-firmware: "\e92c";
+$c8y-icon-light-grid-off: "\e92d";
+$c8y-icon-light-group-add: "\e92e";
+$c8y-icon-light-group-open: "\e92f";
+$c8y-icon-light-group-remote-inactive: "\e930";
+$c8y-icon-light-group-remote-open: "\e931";
+$c8y-icon-light-group-remote: "\e932";
+$c8y-icon-light-group-smart-open: "\e933";
+$c8y-icon-light-group-smart: "\e934";
+$c8y-icon-light-java: "\e935";
+$c8y-icon-light-layers: "\e936";
+$c8y-icon-light-location: "\e937";
+$c8y-icon-light-machine-portal: "\e938";
+$c8y-icon-light-management: "\e939";
+$c8y-icon-light-metering: "\e93a";
+$c8y-icon-light-mobile-add: "\e93b";
+$c8y-icon-light-mobile-config: "\e93c";
+$c8y-icon-light-modules: "\e93d";
+$c8y-icon-light-notification: "\e93e";
+$c8y-icon-light-oee: "\e93f";
+$c8y-icon-light-overviews: "\e940";
+$c8y-icon-light-parameters-on: "\e941";
+$c8y-icon-light-parking: "\e942";
+$c8y-icon-light-report: "\e943";
+$c8y-icon-light-reports: "\e944";
+$c8y-icon-light-rocket: "\e945";
+$c8y-icon-light-saas: "\e946";
+$c8y-icon-light-security: "\e947";
+$c8y-icon-light-shield: "\e948";
+$c8y-icon-light-simulator: "\e949";
+$c8y-icon-light-smart-rest: "\e94a";
+$c8y-icon-light-smart-rules: "\e94b";
+$c8y-icon-light-solution-accelerator: "\e94c";
+$c8y-icon-light-streaming-analytics: "\e94d";
+$c8y-icon-light-sub-tenants: "\e94e";
+$c8y-icon-light-tenant-policies: "\e94f";
+$c8y-icon-light-tools: "\e950";
+$c8y-icon-light-tracking: "\e951";
+$c8y-icon-light-usage-statistics: "\e952";
+$c8y-icon-light-user: "\e953";
+$c8y-icon-light-users: "\e954";
+$c8y-icon-light-waste-bin: "\e955";
+$c8y-icon-light-wm-integration: "\e956";
+$c8y-icon-light-analytics-smart-rules: "\e957";

package/variables/_code-vars.less

@@ -1,9 +1,8 @@
-@code-color:                                    var(--c8y-code-color);  
-@code-background:                               var(--c8y-code-background); 
+@code-color:                                    var(--c8y-code-color);
+@code-background:                               var(--c8y-code-background);
 @code-font-family:                              var(--c8y-code-font-family);
 @code-font-size:                                var(--c8y-code-font-size);
 @code-border-radius:                            var(--c8y-code-border-radius);
-@code-border-color:                             var(--c8y-code-border-color);
 
 @kbd-color:                                     @palette-high;
 @kbd-background:                                @black;

package/variables/_code-vars.scss

@@ -0,0 +1,18 @@
+@use 'color-vars' as *;
+
+$code-color:                                    var(--c8y-code-color);  
+$code-background:                               var(--c8y-code-background); 
+$code-font-family:                              var(--c8y-code-font-family);
+$code-font-size:                                var(--c8y-code-font-size);
+$code-border-radius:                            var(--c8y-code-border-radius);
+$code-border-color:                             var(--c8y-code-border-color);
+
+$kbd-color:                                     $palette-high;
+$kbd-background:                                $black;
+$kbd-border-radius:                             var(--c8y-kbd-border-radius, 2px);
+
+$pre-background:                                var(--c8y-pre-background);
+$pre-color:                                     var(--c8y-pre-color);
+$pre-border-color:                              var(--c8y-pre-border-color);
+$pre-border-radius:                             var(--c8y-pre-border-radius);
+$pre-scrollable-max-height:                     340px;

package/variables/_color-defaults.less

@@ -0,0 +1,91 @@
+/**
+ * LESS Variable Defaults for Branding Customization
+ *
+ * These variables can be overridden AFTER importing @c8y/style/extend.less
+ * to customize the theme using LESS variable overriding.
+ *
+ * Example usage:
+ * ```less
+ * // Your styles.less
+ * @import "~@c8y/style/extend.less";
+ * @brand-primary: #8e9de1;  // Override with direct hex value
+ * ```
+ *
+ * These LESS variables are then used to set CSS custom properties,
+ * which are used throughout the application for runtime theming.
+ */
+
+/* Palette defaults - these match the design tokens */
+@palette-blue-40-default: #559ae3;
+@palette-green-10-default: #084708;
+@palette-green-20-default: #0a5c0a;
+@palette-green-30-default: #0f880f;
+@palette-green-40-default: #119d11;
+@palette-green-50-default: #6ac26a;
+@palette-green-60-default: #a5daa5;
+@palette-green-70-default: #d1ecd1;
+@palette-green-80-default: #eff9ef;
+@palette-gray-10-default: #212121;
+@palette-gray-20-default: #2A3846;
+@palette-gray-40-default: #657381;
+@palette-yellow-60-default: #ffbe00;
+@palette-yellow-10-default: #4e3a00;
+@palette-yellow-80-default: #fff6db;
+@palette-orange-50-default: #ff8800;
+
+/* Brand defaults - can be overridden by users */
+@brand-primary-default: @palette-green-40-default;
+@brand-primary-light-default: @palette-green-60-default;
+@brand-primary-dark-default: @palette-gray-20-default;
+@brand-complementary-default: @palette-blue-40-default;
+@brand-10-default: @palette-green-10-default;
+@brand-20-default: @palette-green-20-default;
+@brand-30-default: @palette-green-30-default;
+@brand-40-default: @palette-green-40-default;
+@brand-50-default: @palette-green-50-default;
+@brand-60-default: @palette-green-60-default;
+@brand-70-default: @palette-green-70-default;
+@brand-80-default: @palette-green-80-default;
+
+@brand-accent-default: @palette-yellow-60-default;
+@brand-accent-dark-default: @palette-yellow-10-default;
+@brand-accent-light-default: @palette-yellow-80-default;
+
+/* Status defaults */
+@status-success-default: #71A112;
+@status-info-default: #056ad6;
+@status-danger-default: #d70f0f;
+@status-warning-default: @palette-orange-50-default;
+
+/*
+ * Variable initialization with conditional guard system
+ * Users can override by defining @brand-primary etc. AFTER importing extend.less
+ *
+ * How it works:
+ * 1. These variables are defined with default values
+ * 2. Users import extend.less, then override: @brand-primary: #yourcolor;
+ * 3. Conditional guards in _color-vars.less detect overrides (value != default)
+ * 4. CSS custom properties are generated with the overridden values
+ */
+
+@brand-primary: @brand-primary-default;
+@brand-primary-light: @brand-primary-light-default;
+@brand-primary-dark: @brand-primary-dark-default;
+@brand-complementary: @brand-complementary-default;
+@brand-10: @brand-10-default;
+@brand-20: @brand-20-default;
+@brand-30: @brand-30-default;
+@brand-40: @brand-40-default;
+@brand-50: @brand-50-default;
+@brand-60: @brand-60-default;
+@brand-70: @brand-70-default;
+@brand-80: @brand-80-default;
+
+@brand-accent: @brand-accent-default;
+@brand-accent-dark: @brand-accent-dark-default;
+@brand-accent-light: @brand-accent-light-default;
+
+@status-success: @status-success-default;
+@status-info: @status-info-default;
+@status-danger: @status-danger-default;
+@status-warning: @status-warning-default;

package/variables/_color-defaults.scss

@@ -0,0 +1,91 @@
+/**
+ * LESS Variable Defaults for Branding Customization
+ *
+ * These variables can be overridden AFTER importing $c8y/style/extend.less
+ * to customize the theme using LESS variable overriding.
+ *
+ * Example usage:
+ * ```less
+ * // Your styles.less
+ * @import '~$c8y/style/extend';
+ * $brand-primary: #8e9de1;  // Override with direct hex value
+ * ```
+ *
+ * These LESS variables are then used to set CSS custom properties,
+ * which are used throughout the application for runtime theming.
+ */
+
+/* Palette defaults - these match the design tokens */
+$palette-blue-40-default: #559ae3;
+$palette-green-10-default: #084708;
+$palette-green-20-default: #0a5c0a;
+$palette-green-30-default: #0f880f;
+$palette-green-40-default: #119d11;
+$palette-green-50-default: #6ac26a;
+$palette-green-60-default: #a5daa5;
+$palette-green-70-default: #d1ecd1;
+$palette-green-80-default: #eff9ef;
+$palette-gray-10-default: #212121;
+$palette-gray-20-default: #2A3846;
+$palette-gray-40-default: #657381;
+$palette-yellow-60-default: #ffbe00;
+$palette-yellow-10-default: #4e3a00;
+$palette-yellow-80-default: #fff6db;
+$palette-orange-50-default: #ff8800;
+
+/* Brand defaults - can be overridden by users */
+$brand-primary-default: $palette-green-40-default;
+$brand-primary-light-default: $palette-green-60-default;
+$brand-primary-dark-default: $palette-gray-20-default;
+$brand-complementary-default: $palette-blue-40-default;
+$brand-10-default: $palette-green-10-default;
+$brand-20-default: $palette-green-20-default;
+$brand-30-default: $palette-green-30-default;
+$brand-40-default: $palette-green-40-default;
+$brand-50-default: $palette-green-50-default;
+$brand-60-default: $palette-green-60-default;
+$brand-70-default: $palette-green-70-default;
+$brand-80-default: $palette-green-80-default;
+
+$brand-accent-default: $palette-yellow-60-default;
+$brand-accent-dark-default: $palette-yellow-10-default;
+$brand-accent-light-default: $palette-yellow-80-default;
+
+/* Status defaults */
+$status-success-default: #71A112;
+$status-info-default: #056ad6;
+$status-danger-default: #d70f0f;
+$status-warning-default: $palette-orange-50-default;
+
+/*
+ * Variable initialization with conditional guard system
+ * Users can override by defining $brand-primary etc. AFTER importing extend.less
+ *
+ * How it works:
+ * 1. These variables are defined with default values
+ * 2. Users import extend.less, then override: $brand-primary: #yourcolor;
+ * 3. Conditional guards in _color-vars.less detect overrides (value != default)
+ * 4. CSS custom properties are generated with the overridden values
+ */
+
+$brand-primary: $brand-primary-default;
+$brand-primary-light: $brand-primary-light-default;
+$brand-primary-dark: $brand-primary-dark-default;
+$brand-complementary: $brand-complementary-default;
+$brand-10: $brand-10-default;
+$brand-20: $brand-20-default;
+$brand-30: $brand-30-default;
+$brand-40: $brand-40-default;
+$brand-50: $brand-50-default;
+$brand-60: $brand-60-default;
+$brand-70: $brand-70-default;
+$brand-80: $brand-80-default;
+
+$brand-accent: $brand-accent-default;
+$brand-accent-dark: $brand-accent-dark-default;
+$brand-accent-light: $brand-accent-light-default;
+
+$status-success: $status-success-default;
+$status-info: $status-info-default;
+$status-danger: $status-danger-default;
+$status-warning: $status-warning-default;