@c8y/style/styles/utilities/_contextual-colors.less

Styles for Cumulocity IoT applications

@import "../mixins/_background-variant.less";
@import "../mixins/_text-emphasis.less";

/**
 * Contextual Color Utilities
 *
 * Note: Uses design tokens for all colors (@brand-*; @status-*; @gray-*, var(--c8y-*)).
 *
 * Intentionally hardcoded values:
 * - 25px, 12.5px (checkered background): Specific dimensions for visual pattern effect
 */

//================================
// Contextual colors
//================================

// Generic text colors
.text-default {
 .text-emphasis-variant(@component-color-default);
}
.text-white {
  .text-emphasis-variant(@component-background-default);
}
.text-muted {
  .text-emphasis-variant(@text-muted);
}

// Brand text colors
.text-primary {
  .text-emphasis-variant(var(--c8y-root-component-brand-primary,@brand-primary));
}
// Removed unused: .text-primary-light, .text-primary-dark

// Accent text colors
.text-accent {
  .text-emphasis-variant(@brand-accent);
}
// Removed unused: .text-accent-light, .text-accent-dark
// Note: .text-accent was NOT in cat5-text-utils.txt (step 225), only light/dark were.
// Checking cat5-text-utils.txt again...
// It lists: .text-accent-dark, .text-accent-light. NOT .text-accent.

// Success text colors
.text-success {
  .text-emphasis-variant(@status-success);
}
// Removed unused: .text-success-light, .text-success-dark

// Info text colors
.text-info {
  .text-emphasis-variant(@status-info);
}
// Removed unused: .text-info-light, .text-info-dark

// Warning text colors
.text-warning {
  .text-emphasis-variant(@status-warning);
}
// Removed unused: .text-warning-light, .text-warning-high, .text-warning-dark

// Danger text colors
.text-danger {
  .text-emphasis-variant(@status-danger);
}
// Removed unused: .text-danger-light, .text-danger-dark

// Gray text colors
// Removed unused gray text colors - verified 0 usages:
// .text-gray-10...100

// backwards compatibility

.text-gray-darker {
  .text-emphasis-variant(@brand-primary-dark);
}

.text-gray-dark {
  .text-emphasis-variant(@gray-30);
}

// Removed unused: .text-gray-medium-dark, .text-gray-medium

.text-gray {
  .text-emphasis-variant(@gray-50);
}

// Removed unused: .text-gray-light

.text-gray-lighter {
  .text-emphasis-variant(@gray-90);
}

// Removed unused: .text-gray-white

//================================
// Contextual backgrounds
//================================
.bg-primary {
  .bg-variant(@brand-primary);
}

.bg-primary-light {
  .bg-variant(@brand-primary-light);
}

// Removed unused: .bg-complementary

// Removed unused: .bg-accent, .bg-accent-dark, .bg-accent-light
// cat6-bg-utils.txt list: .bg-accent, .bg-accent-dark, .bg-accent-light.

// Removed unused: .bg-success, .bg-success-dark, .bg-success-light
// cat6-bg-utils.txt list: .bg-success, .bg-success-dark, .bg-success-light.

.bg-info {
  .bg-variant(@status-info);
}
.bg-info-light {
  .bg-variant(@status-info-light);
}
// Removed unused: .bg-info-dark (cat6 lists .bg-info-dark, but not .bg-info or .bg-info-light)

.bg-warning {
  .bg-variant(@status-warning);
}
// Removed unused: .bg-warning-light, .bg-warning-lightest, .bg-warning-dark (cat6 lists these)
// cat6 does NOT list .bg-warning.

// Removed unused: .bg-danger, .bg-danger-light, .bg-danger-dark
// cat6 lists .bg-danger, .bg-danger-light, .bg-danger-dark.

.bg-checkered {
  background-image:
    linear-gradient(45deg, var(--c8y-level-2) 25%, transparent 25%),
    linear-gradient(135deg, var(--c8y-level-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c8y-level-2) 75%),
    linear-gradient(135deg, transparent 75%, var(--c8y-level-2) 75%);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0 12.5px;
}

// Levels

// Removed unused: bg-level-4, bg-level-3

.bg-level-2 {
   .bg-variant(var(--c8y-level-2));
}

.bg-level-1 {
   .bg-variant(var(--c8y-level-1));
}

.bg-level-0 {
   .bg-variant(var(--c8y-level-0));
}

// Removed unused: .bg-transparent

// Grays
// Removed unused: .bg-gray-10...100

.bg-inherit {
  .bg-variant(inherit);
}

.bg-component {
  background-color: @component-background-default;
}