brutcss/src/extended-colors.less

@info: #59d;
@ok: #494;
@warn: #c90;
@err: #d33;
@fatal: #a3d;

@dark-info: darken(@info,10%) ;
@dark-ok: darken(@ok,10%);
@dark-warn: darken(@warn,10%);
@dark-err: darken(@err,10%);
@dark-fatal: darken(@fatal,10%);

:root {
  --il: saturate(lighten(@info,25%),20%);
  --i0: @info;
  --i1: darken(@info,5%);
  --i2: darken(@info,10%);

  --ol: saturate(lighten(@ok,25%),20%);
  --o0: @ok;
  --o1: darken(@ok,5%);
  --o2: darken(@ok,10%);

  --wl: saturate(lighten(@warn,25%),20%);
  --w0: @warn;
  --w1: darken(@warn,5%);
  --w2: darken(@warn,10%);

  --el: saturate(lighten(@err,25%),20%);
  --e0: @err;
  --e1: darken(@err,5%);
  --e2: darken(@err,10%);

  --fl: saturate(lighten(@fatal,25%),20%);
  --f0: @fatal;
  --f1: darken(@fatal,5%);
  --f2: darken(@fatal,10%);
  /* alert messages */
	--ia: saturate(darken(@info,10%),25%);
	--ib: saturate(darken(@info,0%),35%);
	--oa: saturate(darken(@ok,10%),25%);
	--ob: saturate(darken(@ok,0%),35%);
	--wa: saturate(darken(@warn,10%),25%);
	--wb: saturate(darken(@warn,0%),35%);
	--ea: saturate(darken(@err,10%),25%);
	--eb: saturate(darken(@err,0%),35%);
	--fa: saturate(darken(@fatal,10%),25%);
	--fb: saturate(darken(@fatal,0%),35%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --il: darken(@dark-info,10%);
    --i0: @dark-info;
    --i1: lighten(@dark-info,5%);
    --i2: saturate(lighten(@dark-info,10%),10%);

    --ol: darken(@dark-ok,10%);
    --o0: @dark-ok;
    --o1: lighten(@dark-ok,5%);
    --o2: saturate(lighten(@dark-ok,10%),10%);

    --wl: darken(@dark-warn,10%);
    --w0: @dark-warn;
    --w1: lighten(@dark-warn,5%);
    --w2: saturate(lighten(@dark-warn,10%),10%);

    --el: darken(@dark-err,10%);
    --e0: @dark-err;
    --e1: lighten(@dark-err,5%);
    --e2: saturate(lighten(@dark-err,10%),10%);

    --fl: darken(@dark-fatal,10%);
    --f0: @dark-fatal;
    --f1: lighten(@dark-fatal,5%);
    --f2: saturate(lighten(@dark-fatal,10%),10%);
  }
}

.info { color: var(--i0); }
.bg-info { background: var(--il); }
.ok { color: var(--o0); }
.bg-ok { background: var(--ol); }
.warn { color: var(--w0); }
.bg-warn { background: var(--wl); }
.err { color: var(--e0); }
.bg-err { background: var(--el); }
.fatal { color: var(--f0); }
.bg-fatal { background: var(--fl); }

/* Messages */
.msg.info {
	color: var(--fg);
	background: var(--il);
	border-color: var(--i0);
}
.msg.ok {
	color: var(--fg);
	background: var(--ol);
	border-color: var(--o0);
}
.msg.warn {
	color: var(--fg);
	background: var(--wl);
	border-color: var(--w0);
}
.msg.err {
	color: var(--fg);
	background: var(--el);
	border-color: var(--e0);
}
.msg.fatal {
	color: var(--fg);
	background: var(--fl);
	border-color: var(--f0);
}

.msg.alert, .msg.alert * {
	color: var(--cnt);
	background: var(--na);
	border-color: var(--nb);
}
.msg.alert.info, .msg.alert.info * {
	color: #fff;
	background: var(--ia);
	border-color: var(--ib);
}
.msg.alert.ok, .msg.alert.ok * {
	color: #fff;
	background: var(--oa);
	border-color: var(--ob);
}
.msg.alert.warn, .msg.alert.warn * {
	color: #fff;
	background: var(--wa);
	border-color: var(--wb);
}
.msg.alert.err, .msg.alert.err * {
	color: #fff;
	background: var(--ea);
	border-color: var(--eb);
}
.msg.alert.fatal, .msg.alert.fatal * {
	color: #fff;
	background: var(--fa);
	border-color: var(--fb);
}

/* Buttons */

.tb.info { color: var(--i0);
		   &:hover { color: var(--i1); }
		   &:active { color: var(--i2); }
		 }
.tb.ok { color: var(--o0);
		 &:hover { color: var(--o1); }
		 &:active { color: var(--o2); }
	   }
.tb.warn { color: var(--w0);
		  &:hover { color: var(--w1); }
		  &:active { color: var(--w2); }
		}
.tb.err { color: var(--e0);
		  &:hover { color: var(--e1); }
		  &:active { color: var(--e2); }
		}
.tb.fatal { color: var(--f0);
		  &:hover { color: var(--f1); }
		  &:active { color: var(--f2); }
		}


.btn.info {
	background: var(--i0);
	&:hover {
		background: var(--i1);
	}

	&:active, &:focus {
		background: var(--i2);
	}
}

.btn.ok {
	background: var(--o0);
	&:hover {
		background: var(--o1);
	}
	&:active, &:focus {
		background: var(--o2);
	}
}

.btn.warn {
	background: var(--w0);
	&:hover {
		background: var(--w1);
	}
	&:active, &:focus {
		background: var(--w2);
	}
}

.btn.err {
	background: var(--e0);
	&:hover {
		background: var(--e1);
	}
	&:active, &:focus {
		background: var(--e2);
	}
}
.btn.fatal {
	background: var(--f0);
	&:hover {
		background: var(--f1);
	}
	&:active, &:focus {
		background: var(--f2);
	}
}