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

Styles for Cumulocity IoT applications

//================================
// 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));
}
.text-primary-light {
  .text-emphasis-variant(@brand-primary-light);
}
.text-complementary {
  .text-emphasis-variant(@brand-complementary);
}

// Accent text colors
.text-accent {
  .text-emphasis-variant(@brand-accent);
}
.text-accent-light {
  .text-emphasis-variant(@brand-accent-light);
}
.text-accent-dark {
  .text-emphasis-variant(@brand-accent-dark);
}

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

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

// Warning text colors
.text-warning {
  .text-emphasis-variant(@status-warning);
}
.text-warning-light {
  .text-emphasis-variant(@status-warning-light);
}
.text-warning-lightest {
  .text-emphasis-variant(@status-warning-lightest);
}
.text-warning-dark {
  .text-emphasis-variant(@status-warning-dark);
}

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

// Gray text colors
.text-gray-10{
  .text-emphasis-variant(@gray-10);
}
.text-gray-20{
  .text-emphasis-variant(@gray-20);
}
.text-gray-30{
  .text-emphasis-variant(@gray-30);
}
.text-gray-40{
  .text-emphasis-variant(@gray-40);
}
.text-gray-50{
  .text-emphasis-variant(@gray-50);
}
.text-gray-60{
  .text-emphasis-variant(@gray-60);
}
.text-gray-70{
  .text-emphasis-variant(@gray-70);
}
.text-gray-80{
  .text-emphasis-variant(@gray-80);
}
.text-gray-90{
  .text-emphasis-variant(@gray-90);
}
.text-gray-100{
  .text-emphasis-variant(@gray-100);
}

// backwards compatibility

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

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

.text-gray-medium-dark,
.text-gray-medium {
  .text-emphasis-variant(@gray-40);
}

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

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

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

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


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

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

.bg-complementary {
  .bg-variant(@brand-complementary);
}

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

.bg-success {
  .bg-variant(@status-success);
}
.bg-success-light {
  .bg-variant(@status-success-light);
}
.bg-success-dark {
  .bg-variant(@status-success-dark);
}

.bg-info {
  .bg-variant(@status-info);
}
.bg-info-dark {
  .bg-variant(@status-info-dark);
}
.bg-info-light {
  .bg-variant(@status-info-light);
}

.bg-warning {
  .bg-variant(@status-warning);
}
.bg-warning-light {
  .bg-variant(@status-warning-light);
}
.bg-warning-lightest {
  .bg-variant(@status-warning-lightest);
}
.bg-warning-dark {
  .bg-variant(@status-warning-dark);
}


.bg-danger {
  .bg-variant(@status-danger);
}
.bg-danger-light {
  .bg-variant(@status-danger-light);
}
.bg-danger-dark {
  .bg-variant(@status-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

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

.bg-level-3 {
  .bg-variant(var(--c8y-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));
}

.bg-transparent {
  box-shadow: none;
  .bg-variant(transparent);
}

// Grays

.bg-gray-10{
  .bg-variant(var(--c8y-palette-gray-10));
}
.bg-gray-20{
  .bg-variant(var(--c8y-palette-gray-20));
}
.bg-gray-30{
  .bg-variant(var(--c8y-palette-gray-30));
}
.bg-gray-40{
  .bg-variant(var(--c8y-palette-gray-40));
}
.bg-gray-50{
  .bg-variant(var(--c8y-palette-gray-50));
}
.bg-gray-60{
  .bg-variant(var(--c8y-palette-gray-60));
}
.bg-gray-70{
  .bg-variant(var(--c8y-palette-gray-70));
}
.bg-gray-80{
  .bg-variant(var(--c8y-palette-gray-80));
}
.bg-gray-90{
  .bg-variant(var(--c8y-palette-gray-90));
}
.bg-gray-100{
  .bg-variant(var(--c8y-palette-gray-100));
}

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

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