@c8y/style 1023.17.20 → 1023.22.2

package/variables/README.md

@@ -0,0 +1,485 @@
+# Variables Directory
+
+> **⚠️ Important Notice**: This directory contains LESS variable files for **backward compatibility only**. LESS variable overriding is deprecated and no longer functional.
+
+---
+
+## For End Users: LESS Variable Deprecation
+
+### ⚠️ What Changed
+
+**LESS variable overriding is deprecated and no longer applies branding changes.**
+
+If you were previously customizing your application with LESS variable overrides like this:
+
+```less
+// ❌ DEPRECATED - No longer works
+@import '~@c8y/style/extend.less';
+
+@brand-primary: #custom-color;
+@navigator-bg-color: #custom-nav;
+@header-text-color: #custom-header;
+```
+
+**This approach no longer applies your customizations** because `@c8y/style` now uses SCSS, not LESS, as the primary build system (January 2026).
+
+### ✅ Migration Options
+
+#### Option 1: CSS Custom Properties (Recommended)
+
+Use CSS custom properties for theming at build time or runtime:
+
+```css
+/* Override in your custom CSS/SCSS */
+:root {
+  --brand-primary: #1976d2;
+  --navigator-bg-color: #1565c0;
+  --main-header-background-default: #ffffff;
+  --main-header-text-color-default: #333333;
+}
+```
+
+**Runtime configuration** using application options:
+
+```typescript
+import { ApplicationOptions } from '@c8y/ngx-components';
+
+export const options: ApplicationOptions = {
+  brandingCssVars: {
+    'brand-primary': '#1976d2',
+    'navigator-bg-color': '#1565c0',
+    'main-header-background-default': '#ffffff'
+  }
+};
+```
+
+#### Option 2: Branding Editor (No Code Required)
+
+Use the **Branding Editor** in the Cumulocity Administration app to configure:
+- Brand colors
+- Logos
+- Fonts
+- Custom CSS
+
+This provides a UI for customization without any code changes.
+
+#### Option 3: SCSS Variables (Advanced)
+
+For build-time customization with SCSS:
+
+```scss
+// Import with variable configuration
+@use '~@c8y/style/variables' with (
+  $use-relative-paths: true
+);
+```
+
+> **Note:** SCSS uses a modern module system where variables are scoped and must be explicitly configured using `@use ... with` syntax.
+
+### Variable Mapping Reference
+
+| LESS (Deprecated) | CSS Custom Property | Description |
+|-------------------|---------------------|-------------|
+| `@brand-primary` | `--brand-primary` | Primary brand color |
+| `@brand-complementary` | *deprecated* | Use `--brand-dark` or `--brand-light` instead |
+| `@brand-dark` | `--brand-dark` | Dark brand color |
+| `@navigator-bg-color` | `--navigator-bg-color` | Navigator background |
+| `@navigator-text-color` | `--navigator-text-color` | Navigator text color |
+| `@headerColor` | `--main-header-background-default` | Header background |
+| `@header-text-color` | `--main-header-text-color-default` | Header text color |
+| `@font-family-base` | `--font-family-base` | Base font family |
+
+### Documentation & Resources
+
+- [Branding Tokens](../../codex/content/design-system/design-tokens/branding-tokens.md) - Complete list of CSS custom properties
+- [Application Styles](../../codex/content/common-tasks/application-styles.md) - Styling guide
+- [c8y-design-tokens](https://github.com/Cumulocity-IoT/c8y-design-tokens) - Design tokens repository
+
+---
+
+## For Contributors: Technical Guide
+
+This directory contains SCSS and LESS variable files. SCSS files use the SASS module system (`@use` and `@forward`), while LESS files are maintained for backward compatibility.
+
+### Table of Contents
+
+- [Directory Structure](#directory-structure)
+- [Usage](#usage)
+- [Variable Organization](#variable-organization)
+- [Migration from LESS](#migration-from-less)
+- [Adding New Variables](#adding-new-variables)
+- [SCSS Module System](#scss-module-system)
+- [Troubleshooting](#troubleshooting)
+
+## Directory Structure
+
+```
+variables/
+├── index.scss                    # SCSS main entry point - import this file
+├── index.less                    # LESS main entry point (maintained for releases)
+├── README.md                     # This file
+│
+├── dashboard-themes/             # Dashboard theme overrides
+│   ├── _branded-dashboard.{scss,less}
+│   ├── _dark-dashboard.{scss,less}
+│   ├── _transparent-dashboard.{scss,less}
+│   └── _white-dashboard.{scss,less}
+│
+├── tokens/                       # Design tokens from design system
+│   ├── c8y-design-tokens.scss
+│   └── c8y-design-tokens-dark.scss
+│
+└── [variable files]              # 34 paired SCSS/LESS files
+    ├── _color-defaults.{scss,less}
+    ├── _color-vars.{scss,less}
+    ├── _components-vars.{scss,less}
+    ├── _forms-vars.{scss,less}
+    ├── _buttons-vars.{scss,less}
+    ├── _alert-vars.{scss,less}
+    ├── _badge-vars.{scss,less}
+    ├── _typography-vars.{scss,less}
+    ├── _layout-vars.{scss,less}
+    └── ... (and 25 more paired files)
+```
+
+**Note:** Each variable file exists in both `.scss` and `.less` formats. SCSS files are used for builds; LESS files are maintained for backward compatibility.
+
+## Usage
+
+### Basic Import
+
+To use variables in your SCSS file, import the main index:
+
+```scss
+@use "../../variables/index" as *;
+
+.my-component {
+  color: $brand-primary;
+  padding: $size-16;
+  background: $component-background-default;
+}
+```
+
+### With Namespace (Recommended for Clarity)
+
+```scss
+@use "../../variables/index" as vars;
+
+.my-component {
+  color: vars.$brand-primary;
+  padding: vars.$size-16;
+}
+```
+
+### Configuring Variables
+
+Some variable modules accept configuration:
+
+```scss
+@use "../../variables/index" with (
+  $use-relative-paths: true
+);
+```
+
+## Variable Organization
+
+### Current Structure
+
+Variables are organized in flat files with paired SCSS/LESS implementations:
+
+- **_color-defaults.scss** - Default color palette
+- **_color-vars.scss** - Semantic color mappings
+- **_components-vars.scss** - Component-level variables
+- **_forms-vars.scss** - Form-specific variables
+- **_buttons-vars.scss** - Button-specific variables
+- **_typography-vars.scss** - Font and text variables
+- **_layout-vars.scss** - Grid and layout variables
+- **_scaffolding.scss** - Base scaffolding with asset paths
+
+### Variable Naming Convention
+
+Variables follow the pattern:
+
+```scss
+// Component-based
+$component-{property}-{variant}
+$component-background-default
+$component-border-width
+$component-padding-base-horizontal
+
+// Semantic colors
+$brand-primary
+$brand-dark
+$brand-light
+
+// Layout/spacing (size system)
+$size-base          // 8px base unit
+$size-8             // 8px
+$size-16            // 16px
+$size-24            // 24px
+$size-32            // 32px
+
+// Typography
+$font-size-base
+$font-size-small
+$line-height-base
+$font-family-base
+```
+
+## Migration from LESS
+
+### Key Differences
+
+| LESS | SCSS | Notes |
+|------|------|-------|
+| `@import` | `@use` / `@forward` | Module system with namespacing |
+| `@variable` | `$variable` | Variable prefix changed |
+| `.mixin()` | `@include mixin()` | Mixin calls |
+| Lazy loading | Explicit dependencies | Must declare all imports |
+| Guards `when` | `@if` / `@else` | Conditional logic changed |
+
+### Variable Resolution
+
+The `index.scss` file handles duplicate variables using `@forward hide`:
+
+```scss
+// Hide duplicate variables from color-vars
+@forward '_color-vars' hide
+  $component-background-default,
+  $component-border-width,
+  $component-border-style;
+```
+
+This prevents conflicts when multiple modules define the same variable.
+
+### Removed Features
+
+**LESS Guards** - SCSS doesn't support LESS-style conditional guards (`& when`). Code that depended on guards has been:
+- Removed if it was legacy/deprecated behavior
+- Converted to always-on if it's standard behavior
+- Documented with instructions for custom override if needed
+
+Example from `_navigator.scss`:
+```scss
+// LESS (conditional):
+& when not(@appBranding='') {
+  .c8y-icon { display: none !important; }
+}
+
+// SCSS (removed - document override path):
+// To hide icons, add to your custom CSS:
+// .navigator .title .c8y-icon { display: none !important; }
+```
+
+## LESS/SCSS Dual Maintenance
+
+### Overview
+
+Both LESS and SCSS files are maintained in this directory:
+
+- **SCSS files**: Used for builds (primary)
+- **LESS files**: Maintained for backward compatibility
+- **Both must be kept in sync** to ensure consistency
+
+### When Working with Variables
+
+**Important**: When modifying variables, you must update both SCSS and LESS files:
+
+1. **Make changes in SCSS file** (primary)
+
+   ```scss
+   // _buttons-vars.scss
+   $btn-primary-bg: $brand-primary !default;
+   ```
+
+2. **Sync to LESS file** (convert syntax)
+
+   ```less
+   // _buttons-vars.less
+   @btn-primary-bg: @brand-primary;
+   ```
+
+3. **Commit both files together**
+
+   ```bash
+   git add packages/style/variables/_buttons-vars.{scss,less}
+   git commit -m "Update button variables"
+   ```
+
+### Syntax Quick Reference
+
+| SCSS | LESS | Notes |
+| ---- | ---- | ----- |
+| `$variable` | `@variable` | Variable prefix |
+| `@include mixin()` | `.mixin()` | Mixin calls |
+| `@mixin name()` | `.name()` | Mixin definitions |
+| `@use 'file'` | `@import 'file'` | Imports |
+| `#{$var}` | `@{var}` | Interpolation |
+
+### Pre-commit Hook
+
+A pre-commit hook verifies LESS/SCSS sync:
+
+- Detects SCSS changes
+- Checks if corresponding LESS file is updated
+- Compiles both preprocessors
+- Blocks commit if compilation fails
+
+## Adding New Variables
+
+### 1. Choose the Right File
+
+- **Component-specific** → Add to `_components-vars.scss`
+- **Form-related** → Add to `_forms-vars.scss`
+- **Color** → Add to `_color-vars.scss`
+- **Layout/spacing** → Add to `_layout-vars.scss`
+- **New category** → Create new file (see step 2)
+
+### 2. Create a New Variable File
+
+If creating a new category:
+
+```scss
+// variables/_my-new-vars.scss
+@use 'color-defaults' as *;  // Import dependencies if needed
+
+$my-variable: value !default;
+$my-other-variable: $gray-60 !default;
+```
+
+### 3. Register in index.scss
+
+Add your new file to `variables/index.scss`:
+
+```scss
+// Import and make available
+@use '_my-new-vars' as *;
+@forward '_my-new-vars';
+```
+
+Position matters! Place it after dependencies but before files that use it.
+
+### 4. Use !default Flag
+
+Always use `!default` for variables that should be customizable:
+
+```scss
+$my-variable: #007bff !default;  // ✅ Can be overridden
+$my-constant: #007bff;           // ❌ Cannot be overridden
+```
+
+## SCSS Module System
+
+### @use vs @import
+
+**Never use `@import`** - it's deprecated and will be removed in Dart Sass 3.0.
+
+```scss
+// ❌ Old way (deprecated)
+@import 'variables/index';
+
+// ✅ New way
+@use 'variables/index' as *;
+```
+
+### @use Rules
+
+1. **Must be at the top** - No @use statements after regular CSS
+2. **Each file once** - Can't @use the same file twice in one file
+3. **Namespaced by default** - Use `as *` to add to global scope
+4. **Private members** - Variables starting with `-` or `_` are private
+
+### @forward for Re-exporting
+
+The `index.scss` uses `@forward` to re-export all variables:
+
+```scss
+@use '_color-vars' as *;        // Make available in this file
+@forward '_color-vars';         // Re-export for consumers
+```
+
+This allows a single import point: `@use 'variables/index' as *;`
+
+### Configuration with 'with'
+
+Pass configuration to modules:
+
+```scss
+@use '_scaffolding' with (
+  $use-relative-paths: true
+);
+```
+
+Note: Can't use both `with` and `as *` together. Use separately:
+
+```scss
+@use '_scaffolding' with ($use-relative-paths: true);  // Configure
+@forward '_scaffolding' hide $use-relative-paths;      // Re-export but hide config var
+```
+
+## Troubleshooting
+
+### "Undefined variable"
+
+**Cause**: File doesn't import variables index.
+
+**Solution**: Add to top of file:
+```scss
+@use "../../variables/index" as *;
+```
+
+### "This variable is available from multiple global modules"
+
+**Cause**: Multiple modules define the same variable without hiding duplicates.
+
+**Solution**: Use `@forward hide` in `index.scss`:
+```scss
+@forward '_color-vars' hide $duplicate-variable;
+```
+
+### "expected ';'"
+
+**Cause**: Can't use `@use ... with (...) as *;`
+
+**Solution**: Remove `as *`:
+```scss
+// ❌ Wrong
+@use '_module' with ($var: value) as *;
+
+// ✅ Right
+@use '_module' with ($var: value);
+@forward '_module';
+```
+
+### Circular dependency
+
+**Cause**: File A imports B, B imports A.
+
+**Solution**: Restructure to use a third file for shared variables, or use `@forward` instead of `@use` where appropriate.
+
+### "The target selector was not found"
+
+**Cause**: `@extend` references a class that doesn't exist or isn't loaded yet.
+
+**Solution**: Add `!optional` flag:
+```scss
+@extend .some-class !optional;
+```
+
+## Best Practices
+
+1. **Always import variables/index** - Don't import individual variable files
+2. **Use semantic variable names** - Prefer `$component-background-default` over `$white`
+3. **Document custom variables** - Add comments explaining usage
+4. **Use !default for customization** - Allow variables to be overridden
+5. **Avoid duplication** - Reuse existing variables when possible
+6. **Namespace complex imports** - Use `as vars` for clarity in large files
+7. **Keep variables DRY** - Define once, reference everywhere
+
+## Related Documentation
+
+- [SASS Module System](https://sass-lang.com/documentation/at-rules/use)
+- [SASS @forward](https://sass-lang.com/documentation/at-rules/forward)
+- [SASS Variables](https://sass-lang.com/documentation/variables)
+- [Branding Tokens](../../codex/content/design-system/design-tokens/branding-tokens.md) - CSS custom properties
+- [Application Styles](../../codex/content/common-tasks/application-styles.md) - Styling guide

package/variables/_alert-vars.scss

@@ -0,0 +1,36 @@
+@use 'dlt-c8y-icons-vars';
+
+$alert-background:                      var(--c8y-alert-background-default);
+$alert-color:                           var(--c8y-alert-color-default);
+$alert-icon-font-family:                var(--c8y-alert-status-symbol-font-family);
+$alert-max-width:                       var(--c8y-alert-max-width);
+$alert-border-width:                    var(--c8y-alert-border-width);
+$alert-border-style:                    var(--c8y-alert-border-style);
+$alert-status-symbol-size:              var(--c8y-alert-status-symbol-size);
+$alert-padding:                         var(--c8y-alert-padding);
+
+$alert-success-icon:                    var(--c8y-alert-success-icon, dlt-c8y-icons-vars.$dlt-c8y-icon-check-circle);
+$alert-success-bg:                      $alert-background;
+$alert-success-text:                    $alert-color;
+$alert-success-border:                  var(--palette-status-success, var(--c8y-alert-status-success));
+
+$alert-info-icon:                       var(--c8y-alert-info-icon, dlt-c8y-icons-vars.$dlt-c8y-icon-info-circle);
+$alert-info-bg:                         $alert-background;
+$alert-info-text:                       $alert-color;
+$alert-info-border:                     var(--palette-status-info, var(--c8y-alert-status-info));
+
+$alert-system-icon:                     var(--c8y-alert-system-icon, dlt-c8y-icons-vars.$dlt-c8y-icon-wrench);
+$alert-system-bg:                       $alert-background;
+$alert-system-text:                     $alert-color;
+$alert-system-border:                   var(--c8y-alert-status-system);
+
+$alert-warning-icon:                    var(--c8y-alert-warning-icon, dlt-c8y-icons-vars.$dlt-c8y-icon-warning);
+$alert-warning-bg:                      $alert-background;
+$alert-warning-text:                    $alert-color;
+$alert-warning-border:                  var(--palette-status-warning, var(--c8y-alert-status-warning));
+$alert-warning-dark:                    var(--palette-status-warning-dark, var(--c8y-alert-status-warning-dark, #4B3B06));
+
+$alert-danger-icon:                     var(--c8y-alert-danger-icon, dlt-c8y-icons-vars.$dlt-c8y-icon-exclamation-circle);
+$alert-danger-bg:                       $alert-background;
+$alert-danger-text:                     $alert-color;
+$alert-danger-border:                   var(--palette-status-danger, var(--c8y-alert-status-danger));

package/variables/_badge-vars.less

@@ -13,7 +13,6 @@
 @badge-color-system:                                @palette-high;
 
 @badge-border-radius:                               var(--c8y-badge-border-radius);
-@badge-padding:                                     var(--c8y-badge-padding);
 
 @badge-font-size:                                   var(--c8y-badge-font-size);
 @badge-font-weight:                                 var(--c8y-badge-font-weight);

package/variables/_badge-vars.scss

@@ -0,0 +1,24 @@
+@use 'color-vars';
+
+$badge-background-default:                          color-vars.$gray-80;
+$badge-background-success:                          color-vars.$status-success-light;
+$badge-background-warning:                          color-vars.$status-warning-light;
+$badge-background-danger:                           color-vars.$status-danger-light;
+$badge-background-info:                             color-vars.$status-info-light;
+$badge-background-system:                           color-vars.$status-system;
+
+$badge-color-default:                               color-vars.$text-color;
+$badge-color-success:                               color-vars.$status-success-dark;
+$badge-color-warning:                               color-vars.$status-warning-dark;
+$badge-color-danger:                                color-vars.$status-danger-dark;
+$badge-color-info:                                  color-vars.$status-info-dark;
+$badge-color-system:                                color-vars.$palette-high;
+
+$badge-border-radius:                               var(--c8y-badge-border-radius);
+$badge-padding:                                     var(--c8y-badge-padding);
+
+$badge-font-size:                                   var(--c8y-badge-font-size);
+$badge-font-weight:                                 var(--c8y-badge-font-weight);
+$badge-line-height:                                 var(--c8y-badge-line-height);
+
+$badge-color-focus:                                 color-vars.$palette-high;

package/variables/_brand-vars.scss

@@ -0,0 +1,97 @@
+@use 'typography-vars' as *;
+@use 'tokens/c8y-design-tokens-dark' as dark;
+
+/* CUMULOCITY-IOT BRAND CSS VARS */
+
+$use-relative-paths: false !default;
+
+$image-path: '';
+
+/* DEPRECATED - Must be defined early for fallback usage */
+$appLogo: deprecated; // replaces the app icon with an image.
+
+//falbacks
+$brand-logo-img-fallback: if($use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'); // Logo for login and loading
+$brand-logo-img-fallback-dark: if($use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'); // Logo for login and loading
+
+$brand-logo-height-fallback: 20%;
+
+$navigator-platform-logo-fallback:if($appLogo=deprecated, if($use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'), $appLogo); // legacy support
+$navigator-platform-logo-dark-fallback:   if($appLogo=deprecated, if($use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'), $appLogo); // legacy support
+
+$navigator-platform-logo-height-fallback: 32px;
+$appLogo-height: deprecated;
+$appBranding: ''; //When different from empty, hides app name in navigator
+$powered-by: ''; // when set adds an image below login form. ex.: trackerando
+
+
+// Login
+$brand-logo-img: var(--brand-logo-img, var(--c8y-brand-logo-img));
+$brand-logo-height: var(--brand-logo-img-height, var(--c8y-brand-logo-img-height));
+
+$navigator-platform-logo: var(--navigator-platform-logo, var(--c8y-navigator-platform-logo));
+
+$navigator-platform-logo-height: var(--navigator-platform-logo-height, var(--c8y-navigator-platform-logo-height));
+
+// Typography
+$font-family-headings-css-var: var(--c8y-font-family-headings, $headings-font-family);
+$font-family-base-css-var: var(--c8y-font-family-base, $font-family-base);
+
+// Backward compatibility tokens
+
+:root, .c8y-light-theme{
+  --c8y-brand-logo-img: url('#{$brand-logo-img-fallback}');
+  --c8y-brand-logo-height: #{$brand-logo-height-fallback};
+
+  --c8y-navigator-platform-logo: url('#{$navigator-platform-logo-fallback}');
+  --c8y-navigator-platform-logo-height: #{$navigator-platform-logo-height-fallback};
+
+  --c8y-header-color: var(--c8y-main-header-background-default);
+  --c8y-header-text-color: var(--c8y-main-header-text-color-default);
+  --c8y-header-hover-color: var(--c8y-main-header-text-color-hover);
+
+  --c8y-navigator-bg-color: var(--c8y-navigator-background-default);
+  --c8y-navigator-header-bg: var(--c8y-navigator-header-background);
+
+  --c8y-navigator-title-color: var(--c8y-navigator-header-color);
+
+  --c8y-navigator-active-bg: var(--c8y-navigator-background-selected);
+
+  --c8y-navigator-text-color: var(--c8y-navigator-text-color-default);
+  --c8y-navigator-color-active: var(--c8y-navigator-text-color-selected);
+
+  --c8y-navigator-border-active: var(--c8y-navigator-border-selected);
+
+  --c8y-right-drawer-link-color: var(--c8y-right-drawer-link-color-default);
+}
+
+.c8y-dark-theme{
+  --c8y-brand-logo-img: url('#{$image-path}#{$brand-logo-img-fallback-dark}');
+  --c8y-navigator-platform-logo: url('#{$navigator-platform-logo-dark-fallback}');
+
+  --c8y-header-color: var(--c8y-main-header-background-default);
+  --c8y-header-text-color: var(--c8y-main-header-text-color-default);
+  --c8y-header-hover-color: var(--c8y-main-header-text-color-hover);
+
+  --c8y-navigator-bg-color: var(--c8y-navigator-background-default);
+  --c8y-navigator-header-bg: var(--c8y-navigator-header-background);
+
+  --c8y-navigator-title-color: var(--c8y-navigator-header-color);
+
+  --c8y-navigator-active-bg: var(--c8y-navigator-background-selected);
+
+  --c8y-navigator-text-color: var(--c8y-navigator-text-color-default);
+  --c8y-navigator-color-active: var(--c8y-navigator-text-color-selected);
+
+  --c8y-navigator-border-active: var(--c8y-navigator-border-selected);
+
+  --c8y-right-drawer-link-color: var(--c8y-right-drawer-link-color-default);
+
+  --body-background-color: var(--c8y-body-background-color);
+}
+
+.c8y-system-theme {
+  @media (prefers-color-scheme: dark){
+    @include dark.c8y-dark-theme();
+  }
+}

package/variables/_breadcrumbs-vars.scss

@@ -0,0 +1,13 @@
+@use 'color-vars' as *;
+@use 'layout-vars' as *;
+@use 'typography-vars' as *;
+
+$breadcrumb-background-default:                       $headerColor;
+$breadcrumb-text-color:                               $header-text-color;
+$breadcrumb-text-color-hover:                         $header-text-color-hover;
+$breadcrumb-text-color-active:                        $header-text-color-hover;
+
+$breadcrumb-padding-vertical:                         $size-base;
+$breadcrumb-padding-horizontal:                       $size-16;
+
+$breadcrumbs-font-size:                               $font-size-small;

package/variables/_buttons-vars.less

@@ -1,3 +1,4 @@
+@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);
@@ -85,4 +86,20 @@
 @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;