D3vugu-components/static/css/d3c-theme-base.css

:root, .d3c-color-layer-0 {
	--d3c-color-background: white;
	--d3c-color-text: black;

	--d3c-color-border: #b7b7b7;

	/*The following special colors are meant for backgrounds and must contrast well with --d3c-color-text.*/
	--d3c-color-hovered: #dadada;		/*Elements being hovered by the input cursor.*/
	--d3c-color-focused: #b7b7b7;		/*Elements being "pre" selected and can receive keyboard events.*/
	--d3c-color-activated: #b7b7b7;	/*Elements being actively pressed or interacted with.*/
	--d3c-color-highlighted: #b7b7b7;	/*Elements being highlighted for any other reason, like a selected or active element. But not due to user interaction.*/

	/*The following special colors are meant for text and lines and must contrast well with --d3c-color-background.*/
	/*Elements should only use the colors sparingly, otherwise it would cause too much visual clutter.*/
	--d3c-color-accent: #0071b7;	/*General accent color.*/

	--d3c-color-shadow: rgba(0, 0, 0, 0.2);
}

.d3c-color-layer-1 {
	--d3c-color-background: #e8e8e8;
	--d3c-color-text: black;

	--d3c-color-border: #b7b7b7;

	--d3c-color-hovered: #dadada;
	--d3c-color-focused: #b7b7b7;
	--d3c-color-activated: #b7b7b7;
	--d3c-color-highlighted: #b7b7b7;

	--d3c-color-accent: #0071b7;
}

.d3c-color-layer-2 {
	--d3c-color-background: #cfcfcf;
	--d3c-color-text: black;

	--d3c-color-border: #b7b7b7;

	--d3c-color-hovered: #dadada;
	--d3c-color-focused: #b7b7b7;
	--d3c-color-activated: #b7b7b7;
	--d3c-color-highlighted: #b7b7b7;

	--d3c-color-accent: #0071b7;
}

.d3c-color-accent {
	--d3c-color-background: #0063a1;
	--d3c-color-text: white;

	--d3c-color-border: #004671;

	--d3c-color-hovered: #005285;
	--d3c-color-focused: #004671;
	--d3c-color-activated: #004671;
	--d3c-color-highlighted: #004671;

	--d3c-color-accent: #98c3ff;
}

.d3c-color-success {
	--d3c-color-background: #178500;
	--d3c-color-text: white;

	--d3c-color-border: #116700;

	--d3c-color-hovered: #147600;
	--d3c-color-focused: #116700;
	--d3c-color-activated: #116700;
	--d3c-color-highlighted: #116700;

	--d3c-color-accent: #006aff;
}

.d3c-color-success-faded {
	--d3c-color-background: #bef8b2;
	--d3c-color-text: black;

	--d3c-color-border: #a3d599;

	--d3c-color-hovered: #aee4a3;
	--d3c-color-focused: #a3d599;
	--d3c-color-activated: #a3d599;
	--d3c-color-highlighted: #a3d599;

	--d3c-color-accent: #0071b7;
}

.d3c-color-attention {
	--d3c-color-background: #0063a1;
	--d3c-color-text: white;

	--d3c-color-border: #004671;

	--d3c-color-hovered: #005285;
	--d3c-color-focused: #004671;
	--d3c-color-activated: #004671;
	--d3c-color-highlighted: #004671;

	--d3c-color-accent: #006aff;
}

.d3c-color-attention-faded {
	--d3c-color-background: #bbe5ff;
	--d3c-color-text: black;

	--d3c-color-border: #a1c5dc;

	--d3c-color-hovered: #abd3eb;
	--d3c-color-focused: #a1c5dc;
	--d3c-color-activated: #a1c5dc;
	--d3c-color-highlighted: #a1c5dc;

	--d3c-color-accent: #0071b7;
}

.d3c-color-caution {
	--d3c-color-background: #ab9900;
	--d3c-color-text: white;

	--d3c-color-border: #7a6d00;

	--d3c-color-hovered: #988900;
	--d3c-color-focused: #7a6d00;
	--d3c-color-activated: #7a6d00;
	--d3c-color-highlighted: #7a6d00;

	--d3c-color-accent: #006aff;
}

.d3c-color-caution-faded {
	--d3c-color-background: #fcf197;
	--d3c-color-text: black;

	--d3c-color-border: #dbd184;

	--d3c-color-hovered: #ebe08d;
	--d3c-color-focused: #dbd184;
	--d3c-color-activated: #dbd184;
	--d3c-color-highlighted: #dbd184;

	--d3c-color-accent: #0071b7;
}

.d3c-color-critical {
	--d3c-color-background: #bc0000;
	--d3c-color-text: white;

	--d3c-color-border: #930000;

	--d3c-color-hovered: #a70000;
	--d3c-color-focused: #930000;
	--d3c-color-activated: #930000;
	--d3c-color-highlighted: #930000;

	--d3c-color-accent: #006aff;
}

.d3c-color-critical-faded {
	--d3c-color-background: #fed3d3;
	--d3c-color-text: black;

	--d3c-color-border: #d9b4b4;

	--d3c-color-hovered: #e9c0c0;
	--d3c-color-focused: #d9b4b4;
	--d3c-color-activated: #d9b4b4;
	--d3c-color-highlighted: #d9b4b4;

	--d3c-color-accent: #0071b7;
}