@c8y/style/variables/_color-defaults.less

Styles for Cumulocity IoT applications

/**
 * ⚠️ DEPRECATED: SCSS/LESS Variable Defaults
 *
 * This file is DEPRECATED and no longer functionally used in the branding system.
 * It is kept only for backward compatibility and will be removed in a future major release.
 *
 * WHY DEPRECATED:
 * - The LESS/SCSS variable override system has been replaced with CSS custom properties
 * - Values defined here are immediately overwritten in _color-vars.scss (line 26)
 * - The conditional guards that used these "-default" values are now disabled
 *
 * MIGRATION PATH:
 * Use CSS custom properties instead:
 *
 * ```css
 * :root {
 *   --brand-primary: #8e9de1;
 *   --navigator-bg-color: #2c3e50;
 * }
 * ```
 *
 * Or use application options at runtime:
 * ```typescript
 * export const options: ApplicationOptions = {
 *   brandingCssVars: {
 *     '--brand-primary': '#8e9de1'
 *   }
 * };
 * ```
 *
 * See README.md for more information.
 *
 * DO NOT ADD NEW VARIABLES TO THIS FILE.
 * DO NOT RELY ON THESE VALUES - they are not used in the compiled output.
 */

/* 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;