@c8y/style 1023.14.70 → 1023.14.92

package/variables/_color-vars.less

@@ -1,3 +1,6 @@
+@import '_color-defaults.less';
+@import '_forms-vars.less';
+
 @palette-high: var(--c8y-palette-high);
 @palette-low: var(--c8y-palette-low);
 @black: black; // we need it as a color object
@@ -14,14 +17,33 @@
 @gray-20: var(--c8y-palette-gray-20);
 @gray-10: var(--c8y-palette-gray-10);
 
+/* TYPOGRAPHY COLORS - Defined early as used throughout */
+/* Text */
+@text-color: var(--text-color, var(--c8y-text-color));
+@text-muted: var(--text-muted, var(--c8y-text-muted));
+
 /* Brand */
-/* NOTE: @brand-primary, @brand-light, @brand-dark, @brand-accent, etc.  */
-/* are defined in _color-defaults.less with actual color values */
-/* and can be overridden AFTER importing extend.less. */
-/* They are NO LONGER redefined here as CSS var() references. */
+@brand-primary: var(--brand-primary, var(--c8y-brand-primary));
+@brand-primary-light: var(--brand-light, var(--c8y-brand-light));
+@brand-primary-dark: var(--brand-dark, var(--c8y-brand-dark));
+@brand-complementary: var(--brand-complementary, var(--c8y-brand-complementary));
+@brand-10: var(--brand-10, var(--c8y-brand-10));
+@brand-20: var(--brand-20, var(--c8y-brand-20));
+@brand-30: var(--brand-30, var(--c8y-brand-30));
+@brand-40: var(--brand-40, var(--c8y-brand-40));
+@brand-50: var(--brand-50, var(--c8y-brand-50));
+@brand-60: var(--brand-60, var(--c8y-brand-60));
+@brand-70: var(--brand-70, var(--c8y-brand-70));
+@brand-80: var(--brand-80, var(--c8y-brand-80));
+@brand-accent: var(--brand-accent, var(--c8y-brand-accent));
+@brand-accent-dark: var(--brand-accent-dark, var(--c8y-brand-accent-dark));
+@brand-accent-light: var(--brand-accent-light, var(--c8y-brand-accent-light));
 
 /* Status, feedback states and alerts */
-/* NOTE: Status color variables are also defined in _color-defaults.less */
+@status-success: var(--palette-status-success, var(--c8y-palette-status-success));
+@status-info: var(--palette-status-info, var(--c8y-palette-status-info));
+@status-danger: var(--palette-status-danger, var(--c8y-palette-status-danger));
+@status-warning: var(--palette-status-warning, var(--c8y-palette-status-warning));
 @status-success-light: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
 @status-success-dark: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
 @status-info-light: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
@@ -54,15 +76,15 @@
 @state-danger-border: var(--c8y-palette-status-danger);
 
 /* NAVIGATOR */
-@navigator-background-default: var(--navigator-bg-color, var(--c8y-navigator-background-default));
-@navigator-header-background: var(--navigator-header-bg, var(--c8y-navigator-header-background));
-@navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color-default));
-@navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-header-color));
+@navigator-background-default: var(--navigator-bg-color, var(--c8y-navigator-bg-color));
+@navigator-header-background: var(--navigator-header-bg, var(--c8y-navigator-header-bg));
+@navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color));
+@navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-title-color));
 @navigator-separator-color: var(--navigator-separator-color, var(--c8y-navigator-separator-color));
 @navigator-text-color-selected: var(--navigator-active-color, var(--navigator-color-active, var(--c8y-navigator-text-color-active, var(--c8y-navigator-text-color-selected))));
-@navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-background-selected));
-@navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-selected));
-@navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-background-active));
+@navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
+@navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-active));
+@navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
 @navigator-scrollbar-track-color: var(--c8y-navigator-scrollbar-track);
 @navigator-scrollbar-thumb-color: var(--c8y-navigator-scrollbar-thumb-default);
 @navigator-scrollbar-thumb-color-hover: var(--c8y-navigator-scrollbar-thumb-hover);
@@ -101,17 +123,15 @@
 @header-background-hover: var(--c8y-main-header-background-hover);
 @header-background-active: var(--c8y-main-header-background-active);
 @header-text-color: var(--header-text-color, var(--c8y-main-header-text-color-default));
-@header-text-color-hover: var(--header-hover-color, var(--c8y-main-header-text-color-hover));
+@header-text-color-hover: var(--header-hover-color, var(--c8y-header-hover-color));
 @header-border-color: var(--header-border-color, var(--c8y-main-header-border-color));
 @header-shadow: var(--c8y-main-header-shadow);
 
 /* TYPOGRAPHY COLORS */
 
-/* Text */
-@text-color: var(--text-color, var(--c8y-text-color));
-@text-muted: var(--text-muted, var(--c8y-text-muted));
+/* Text - @text-color and @text-muted defined at top of file */
 @headings-color: var(--c8y-headings-color);
-@abbr-border-color: @gray-80;
+@abbr-border-color: var(--c8y-abbr-border-color);
 @blockquote-small-color: @text-muted;
 @blockquote-border-color: var(--c8y-blockquote-border-color);
 
@@ -223,75 +243,3 @@
 @selectize-color-optgroup: @selectize-color-dropdown;
 @selectize-color-optgroup-text: @selectize-color-text;
 @selectize-arrow-color: @component-brand-primary;
-
-/* ============================================================================
-   CSS Custom Properties based on LESS Variables
-
-   These CSS custom properties are set based on the LESS variable values,
-   allowing LESS variable overrides to work for backwards compatibility.
-
-   When a user overrides @brand-primary before importing main.less,
-   these CSS custom properties will be set to the overridden value,
-   which will then be used throughout the application.
-
-   IMPORTANT: We only override the --c8y-* design tokens when the user has
-   explicitly overridden the LESS variables. The default values come from
-   the design tokens (c8y-design-tokens.less and c8y-design-tokens-dark.less)
-   which correctly handle light vs dark theme defaults.
-   ============================================================================ */
-
-/* Check if user overrode @brand-primary by comparing against default */
-& when not (@brand-primary = @brand-primary-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    /* User overrode @brand-primary, so apply it to both themes */
-    --c8y-brand-primary: @brand-primary;
-    --c8y-brand-light: @brand-primary-light;
-    --c8y-brand-dark: @brand-primary-dark;
-    --c8y-brand-complementary: @brand-complementary;
-  }
-}
-
-& when not (@brand-10 = @brand-10-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-brand-10: @brand-10;
-    --c8y-brand-20: @brand-20;
-    --c8y-brand-30: @brand-30;
-    --c8y-brand-40: @brand-40;
-    --c8y-brand-50: @brand-50;
-    --c8y-brand-60: @brand-60;
-    --c8y-brand-70: @brand-70;
-    --c8y-brand-80: @brand-80;
-  }
-}
-
-& when not (@brand-accent = @brand-accent-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-brand-accent: @brand-accent;
-    --c8y-brand-accent-dark: @brand-accent-dark;
-    --c8y-brand-accent-light: @brand-accent-light;
-  }
-}
-
-& when not (@status-success = @status-success-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-success: @status-success;
-  }
-}
-
-& when not (@status-info = @status-info-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-info: @status-info;
-  }
-}
-
-& when not (@status-danger = @status-danger-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-danger: @status-danger;
-  }
-}
-
-& when not (@status-warning = @status-warning-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-warning: @status-warning;
-  }
-}

package/variables/_color-vars.scss

@@ -23,13 +23,27 @@ $text-color: var(--text-color, var(--c8y-text-color));
 $text-muted: var(--text-muted, var(--c8y-text-muted));
 
 /* Brand */
-/* NOTE: $brand-primary, $brand-light, $brand-dark, $brand-accent, etc.  */
-/* are defined in _color-defaults.less with actual color values */
-/* and can be overridden AFTER importing extend.less. */
-/* They are NO LONGER redefined here as CSS var() references. */
+$brand-primary: var(--brand-primary, var(--c8y-brand-primary));
+$brand-primary-light: var(--brand-light, var(--c8y-brand-light));
+$brand-primary-dark: var(--brand-dark, var(--c8y-brand-dark));
+$brand-complementary: var(--brand-complementary, var(--c8y-brand-complementary));
+$brand-10: var(--brand-10, var(--c8y-brand-10));
+$brand-20: var(--brand-20, var(--c8y-brand-20));
+$brand-30: var(--brand-30, var(--c8y-brand-30));
+$brand-40: var(--brand-40, var(--c8y-brand-40));
+$brand-50: var(--brand-50, var(--c8y-brand-50));
+$brand-60: var(--brand-60, var(--c8y-brand-60));
+$brand-70: var(--brand-70, var(--c8y-brand-70));
+$brand-80: var(--brand-80, var(--c8y-brand-80));
+$brand-accent: var(--brand-accent, var(--c8y-brand-accent));
+$brand-accent-dark: var(--brand-accent-dark, var(--c8y-brand-accent-dark));
+$brand-accent-light: var(--brand-accent-light, var(--c8y-brand-accent-light));
 
 /* Status, feedback states and alerts */
-/* NOTE: Status color variables are also defined in _color-defaults.less */
+$status-success: var(--palette-status-success, var(--c8y-palette-status-success));
+$status-info: var(--palette-status-info, var(--c8y-palette-status-info));
+$status-danger: var(--palette-status-danger, var(--c8y-palette-status-danger));
+$status-warning: var(--palette-status-warning, var(--c8y-palette-status-warning));
 $status-success-light: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
 $status-success-dark: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
 $status-info-light: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
@@ -229,75 +243,3 @@ $selectize-color-dropdown-item-create-active-text: $selectize-color-dropdown-ite
 $selectize-color-optgroup: $selectize-color-dropdown;
 $selectize-color-optgroup-text: $selectize-color-text;
 $selectize-arrow-color: $component-brand-primary;
-
-/* ============================================================================
-   CSS Custom Properties based on LESS Variables
-
-   These CSS custom properties are set based on the LESS variable values,
-   allowing LESS variable overrides to work for backwards compatibility.
-
-   When a user overrides $brand-primary before importing main.less,
-   these CSS custom properties will be set to the overridden value,
-   which will then be used throughout the application.
-
-   IMPORTANT: We only override the --c8y-* design tokens when the user has
-   explicitly overridden the LESS variables. The default values come from
-   the design tokens (c8y-design-tokens.less and c8y-design-tokens-dark.less)
-   which correctly handle light vs dark theme defaults.
-   ============================================================================ */
-
-/* Check if user overrode $brand-primary by comparing against default */
-@if ($brand-primary != $brand-primary-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    /* User overrode $brand-primary, so apply it to both themes */
-    --c8y-brand-primary: #{$brand-primary};
-    --c8y-brand-light: #{$brand-primary-light};
-    --c8y-brand-dark: #{$brand-primary-dark};
-    --c8y-brand-complementary: #{$brand-complementary};
-  }
-}
-
-@if ($brand-10 != $brand-10-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-brand-10: #{$brand-10};
-    --c8y-brand-20: #{$brand-20};
-    --c8y-brand-30: #{$brand-30};
-    --c8y-brand-40: #{$brand-40};
-    --c8y-brand-50: #{$brand-50};
-    --c8y-brand-60: #{$brand-60};
-    --c8y-brand-70: #{$brand-70};
-    --c8y-brand-80: #{$brand-80};
-  }
-}
-
-@if ($brand-accent != $brand-accent-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-brand-accent: #{$brand-accent};
-    --c8y-brand-accent-dark: #{$brand-accent-dark};
-    --c8y-brand-accent-light: #{$brand-accent-light};
-  }
-}
-
-@if ($status-success != $status-success-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-success: #{$status-success};
-  }
-}
-
-@if ($status-info != $status-info-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-info: #{$status-info};
-  }
-}
-
-@if ($status-danger != $status-danger-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-danger: #{$status-danger};
-  }
-}
-
-@if ($status-warning != $status-warning-default) {
-  :root, .c8y-light-theme, .c8y-dark-theme {
-    --c8y-palette-status-warning: #{$status-warning};
-  }
-}

package/variables/{login-vars.less → _login-vars.less}

@@ -1,5 +1,5 @@
-@import 'tokens/c8y-design-tokens.less';
-@import 'tokens/c8y-design-tokens-dark.less';
+@import 'tokens/_c8y-design-tokens.less';
+@import 'tokens/_c8y-design-tokens-dark.less';
 
 .c8y-system-theme{
   @media(prefers-color-scheme: dark) {
@@ -43,6 +43,4 @@
 // @import '_selectize-vars.less';
 // @import '_page-sticky-header.less';
 
-@import 'shadows.less';
-
-
+@import '_shadows.less';

package/variables/index.less

@@ -1,8 +1,8 @@
 /* Import color defaults FIRST so LESS variables can be overridden before main.less import */
 @import '_color-defaults.less';
 
-@import 'tokens/c8y-design-tokens.less';
-@import 'tokens/c8y-design-tokens-dark.less';
+@import 'tokens/_c8y-design-tokens.less';
+@import 'tokens/_c8y-design-tokens-dark.less';
 
 .c8y-system-theme{
   @media(prefers-color-scheme: dark) {
@@ -48,7 +48,7 @@
 @import '_page-sticky-header.less';
 
 // @import 'compatibility.less';
-@import 'shadows.less';
+@import '_shadows.less';
 
 
 // dashboard themes

package/variables/tokens/{c8y-design-tokens-dark.less → _c8y-design-tokens-dark.less}

@@ -2,7 +2,7 @@
 // Do not edit directly
 // Generated on Mon, 12 Jan 2026 11:47:08 GMT
 
-.c8y-dark-theme {
+.c8y-dark-theme() {
 
   /* SECTION: Primitives - Colors */
   --c8y-palette-gray-10: #f2f2f3;
@@ -326,3 +326,7 @@
   /* SECTION: Tooltip - Defaults */
   --c8y-tooltip-opacity: 1;
 }
+
+.c8y-dark-theme {
+  .c8y-dark-theme();
+}

package/variables/tokens/{c8y-design-tokens.less → _c8y-design-tokens.less}

@@ -2,7 +2,7 @@
 // Do not edit directly
 // Generated on Mon, 12 Jan 2026 11:47:08 GMT
 
-:root, .c8y-light-theme {
+.c8y-light-theme() {
 
   /* SECTION: Primitives - Colors */
   --c8y-palette-blue-10: #033c79;
@@ -584,3 +584,7 @@
   --c8y-tooltip-opacity: 0.95;
   --c8y-tooltip-width: calc(var(--c8y-unit-base) * 25);
 }
+
+:root, .c8y-light-theme {
+  .c8y-light-theme();
+}

package/styles/components/specialized/_boxed-label.less

@@ -1,21 +0,0 @@
-.boxed-label {
-  border: dashed 1px transparent; 
-  padding: 8px 8px 4px;
-  border-radius: 2px;
-  position: relative;
-  &[data-label] {
-    border-color: var(--c8y-palette-gray-60);
-    &:before{
-      content: attr(data-label);
-      position: absolute;
-      top: -6px;
-      left: 8px;
-      font-size: var(--c8y-font-size-xs);
-      background-color: var(--c8y-root-component-background-default);
-      color: var(--c8y-root-component-color-text-muted);
-      padding: 0 4px;
-      font-style: italic;
-      border-radius: 2px;
-    }
-  }
-}

package/styles/components/specialized/_boxed-label.scss

@@ -1,36 +0,0 @@
-@use "../../../variables/index" as *;
-
-
-/**
- * uoxed lauel - 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
- */
-.boxed-label {
-  border: dashed 1px transparent;
-  padding: $size-8 $size-8 $size-4;
-  border-radius: 2px;
-  position: relative;
-  &[data-label] {
-    border-color: var(--c8y-palette-gray-60);
-    &:before{
-      content: attr(data-label);
-      position: absolute;
-      top: -6px;
-      left: 8px;
-      font-size: var(--c8y-font-size-xs);
-      background-color: var(--c8y-root-component-background-default);
-      color: var(--c8y-root-component-color-text-muted);
-      padding: 0 4px;
-      font-style: italic;
-      border-radius: 2px;
-    }
-  }
-}

package/styles/components/specialized/_c8y-cookie-banner.less

@@ -1,22 +0,0 @@
-.c8y-cookie-banner {
-  position: fixed;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: @zindex-modal - 3;
-  background-color: rgba(@black, 0.8);
-  color: white;
-}
-
-.cookie-banner-content {
-  column-width: 26rem;
-
-  a{
-    color: inherit;
-    text-decoration: underline;
-    &:hover {
-      color: inherit;
-    }
-  }
-}

package/styles/components/specialized/_static-assets-file-picker.less

@@ -1,8 +0,0 @@
-c8y-static-assets-file-picker{
-  display: block;
-  padding: var(--c8y-root-component-padding-default);
-  border: 1px solid var(--c8y-form-control-border-color-default);
-  img{
-    border: 1px dashed var(--c8y-root-component-border-color);
-  }
-}

package/styles/dashboard/welcome-widget.less

@@ -1,50 +0,0 @@
-.welcome-widget {
-  height: 100%;
-  .welcome-illustration {
-    position: relative;
-    flex-grow: 1;
-    height: auto;
-    > svg {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-  > .flex-row {
-    height: 100%;
-  }
-  .card-group.interact-grid {
-    margin-bottom: 0;
-    .card {
-      margin-bottom: 8px;
-      margin-top: 1px;
-      cursor: pointer;
-      transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
-      outline: 1px solid @component-border-color;
-      
-      &:hover,
-      &:focus {
-        z-index: @zindex-navbar - 1;
-        outline: 2px solid @component-brand-primary;
-        outline-offset: -2px;
-      }
-      &:focus {
-        .c8y-focus();
-      }
-    }
-  }
-}
-
-@media (min-width: @screen-md-min) {
-  .welcome-widget {
-    padding-top: 0;
-  }
-}
-
-body:not(:has(.c8y-logo)) {
-  #c8y-mark{
-    display: none;
-  }
-}

package/styles/mixins/gradients.less

@@ -1,142 +0,0 @@
-#gradient {
-  // Horizontal gradient, from left to right
-  // Creates two color stops, start and end, by specifying a color and position for each color stop.
-  // Color stops are not available in IE9 and below.
-  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
-    background-image: -webkit-linear-gradient(
-      left,
-      @start-color @start-percent,
-      @end-color @end-percent
-    ); // Safari 5.1-6, Chrome 10+
-    background-image: -o-linear-gradient(
-      left,
-      @start-color @start-percent,
-      @end-color @end-percent
-    ); // Opera 12
-    background-image: linear-gradient(
-      to right,
-      @start-color @start-percent,
-      @end-color @end-percent
-    ); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-    background-repeat: repeat-x;
-    filter: e(
-      %(
-        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
-        argb(@start-color),
-        argb(@end-color)
-      )
-    ); // IE9 and down
-  }
-
-  // Vertical gradient, from top to bottom
-  // Creates two color stops, start and end, by specifying a color and position for each color stop.
-  // Color stops are not available in IE9 and below.
-  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
-    background-image: -webkit-linear-gradient(
-      top,
-      @start-color @start-percent,
-      @end-color @end-percent
-    ); // Safari 5.1-6, Chrome 10+
-    background-image: -o-linear-gradient(
-      top,
-      @start-color @start-percent,
-      @end-color @end-percent
-    ); // Opera 12
-    background-image: linear-gradient(
-      to bottom,
-      @start-color @start-percent,
-      @end-color @end-percent
-    ); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-    background-repeat: repeat-x;
-    filter: e(
-      %(
-        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
-        argb(@start-color),
-        argb(@end-color)
-      )
-    ); // IE9 and down
-  }
-
-  .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
-    background-repeat: repeat-x;
-    background-image: -webkit-linear-gradient(
-      @deg,
-      @start-color,
-      @end-color
-    ); // Safari 5.1-6, Chrome 10+
-    background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
-    background-image: linear-gradient(
-      @deg,
-      @start-color,
-      @end-color
-    ); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-  }
-  .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
-    background-image: -webkit-linear-gradient(
-      left,
-      @start-color,
-      @mid-color @color-stop,
-      @end-color
-    );
-    background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
-    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
-    background-repeat: no-repeat;
-    filter: e(
-      %(
-        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
-        argb(@start-color),
-        argb(@end-color)
-      )
-    ); // IE9 and down, gets no color-stop at all for proper fallback
-  }
-  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
-    background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
-    background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
-    background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
-    background-repeat: no-repeat;
-    filter: e(
-      %(
-        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
-        argb(@start-color),
-        argb(@end-color)
-      )
-    ); // IE9 and down, gets no color-stop at all for proper fallback
-  }
-  .radial(@inner-color: #555; @outer-color: #333) {
-    background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
-    background-image: radial-gradient(circle, @inner-color, @outer-color);
-    background-repeat: no-repeat;
-  }
-  .striped(@color: rgba(255,255,255,0.15); @angle: 45deg) {
-    background-image: -webkit-linear-gradient(
-      @angle,
-      @color 25%,
-      transparent 25%,
-      transparent 50%,
-      @color 50%,
-      @color 75%,
-      transparent 75%,
-      transparent
-    );
-    background-image: -o-linear-gradient(
-      @angle,
-      @color 25%,
-      transparent 25%,
-      transparent 50%,
-      @color 50%,
-      @color 75%,
-      transparent 75%,
-      transparent
-    );
-    background-image: linear-gradient(
-      @angle,
-      @color 25%,
-      transparent 25%,
-      transparent 50%,
-      @color 50%,
-      @color 75%,
-      transparent 75%,
-      transparent
-    );
-  }
-}

package/styles/mixins.less

@@ -1,45 +0,0 @@
-// Utilities
-@import 'mixins/hide-text.less';
-@import 'mixins/opacity.less';
-@import 'mixins/image.less';
-@import 'mixins/labels.less'; /* Remove after Codex launch. will be replaced by Tag */
-@import 'mixins/tag.less';
-@import 'mixins/reset-filter.less';
-@import 'mixins/resize.less';
-@import 'mixins/responsive-visibility.less';
-@import 'mixins/size.less';
-@import 'mixins/tab-focus.less';
-@import 'mixins/reset-text.less';
-@import 'mixins/text-emphasis.less';
-@import 'mixins/text-overflow.less';
-@import 'mixins/vendor-prefixes.less';
-@import 'mixins/color-mixins.less';
-@import 'mixins/animation.less';
-
-// Components
-@import 'mixins/buttons.less';
-@import 'mixins/alert-variant.less';
-@import 'mixins/panels.less';
-@import 'mixins/pagination.less';
-@import 'mixins/list-group.less';
-@import 'mixins/nav-divider.less';
-@import 'mixins/forms.less';
-@import 'mixins/progress-bar.less';
-@import 'mixins/table-row.less';
-@import 'mixins/c8y-scrollbar.less';
-
-// Skins
-@import 'mixins/background-variant.less';
-@import 'mixins/border-radius.less';
-@import 'mixins/gradients.less';
-
-// Layout
-@import 'mixins/clearfix.less';
-@import 'mixins/center-block.less';
-@import 'mixins/nav-vertical-align.less';
-@import 'mixins/grid-framework.less';
-@import 'mixins/grid.less';
-@import 'mixins/hide-scrollbars.less';
-@import 'mixins/shadows-helper.less';
-@import 'mixins/element-queries.less';
-@import 'mixins/create-grid.less';