@db-ux/core-foundations 1.0.0-test-13b991d

package/build/styles/colors/_default-palette.scss

@@ -0,0 +1,2523 @@
+@mixin get-color-palette {
+	@property --db-neutral-0 {
+		syntax: "<color>";
+		initial-value: #05070c;
+		inherits: true;
+	}
+
+	@property --db-neutral-1 {
+		syntax: "<color>";
+		initial-value: #0b0e15;
+		inherits: true;
+	}
+
+	@property --db-neutral-2 {
+		syntax: "<color>";
+		initial-value: #10131b;
+		inherits: true;
+	}
+
+	@property --db-neutral-3 {
+		syntax: "<color>";
+		initial-value: #171c26;
+		inherits: true;
+	}
+
+	@property --db-neutral-4 {
+		syntax: "<color>";
+		initial-value: #29303f;
+		inherits: true;
+	}
+
+	@property --db-neutral-5 {
+		syntax: "<color>";
+		initial-value: #3d475b;
+		inherits: true;
+	}
+
+	@property --db-neutral-6 {
+		syntax: "<color>";
+		initial-value: #525e78;
+		inherits: true;
+	}
+
+	@property --db-neutral-7 {
+		syntax: "<color>";
+		initial-value: #687797;
+		inherits: true;
+	}
+
+	@property --db-neutral-8 {
+		syntax: "<color>";
+		initial-value: #8091b5;
+		inherits: true;
+	}
+
+	@property --db-neutral-9 {
+		syntax: "<color>";
+		initial-value: #9fabc7;
+		inherits: true;
+	}
+
+	@property --db-neutral-10 {
+		syntax: "<color>";
+		initial-value: #bfc6d9;
+		inherits: true;
+	}
+
+	@property --db-neutral-11 {
+		syntax: "<color>";
+		initial-value: #dfe2ec;
+		inherits: true;
+	}
+
+	@property --db-neutral-12 {
+		syntax: "<color>";
+		initial-value: #eceef3;
+		inherits: true;
+	}
+
+	@property --db-neutral-13 {
+		syntax: "<color>";
+		initial-value: #f2f3f7;
+		inherits: true;
+	}
+
+	@property --db-neutral-14 {
+		syntax: "<color>";
+		initial-value: #fff;
+		inherits: true;
+	}
+
+	@property --db-neutral-origin {
+		syntax: "<color>";
+		initial-value: #7788ac;
+		inherits: true;
+	}
+
+	@property --db-neutral-origin-light-default {
+		syntax: "<color>";
+		initial-value: #7788ac;
+		inherits: true;
+	}
+
+	@property --db-neutral-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #616f8d;
+		inherits: true;
+	}
+
+	@property --db-neutral-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #4b566e;
+		inherits: true;
+	}
+
+	@property --db-neutral-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #05070c;
+		inherits: true;
+	}
+
+	@property --db-neutral-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #1a1f2a;
+		inherits: true;
+	}
+
+	@property --db-neutral-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #2d3545;
+		inherits: true;
+	}
+
+	@property --db-neutral-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #7788ac;
+		inherits: true;
+	}
+
+	@property --db-neutral-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #95a2c1;
+		inherits: true;
+	}
+
+	@property --db-neutral-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #b4bdd3;
+		inherits: true;
+	}
+
+	@property --db-neutral-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #05070c;
+		inherits: true;
+	}
+
+	@property --db-neutral-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #1a1f2a;
+		inherits: true;
+	}
+
+	@property --db-neutral-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #2d3545;
+		inherits: true;
+	}
+
+	@property --db-brand-0 {
+		syntax: "<color>";
+		initial-value: #050420;
+		inherits: true;
+	}
+
+	@property --db-brand-1 {
+		syntax: "<color>";
+		initial-value: #09082f;
+		inherits: true;
+	}
+
+	@property --db-brand-2 {
+		syntax: "<color>";
+		initial-value: #0d0c3b;
+		inherits: true;
+	}
+
+	@property --db-brand-3 {
+		syntax: "<color>";
+		initial-value: #14124d;
+		inherits: true;
+	}
+
+	@property --db-brand-4 {
+		syntax: "<color>";
+		initial-value: #25237a;
+		inherits: true;
+	}
+
+	@property --db-brand-5 {
+		syntax: "<color>";
+		initial-value: #3834ab;
+		inherits: true;
+	}
+
+	@property --db-brand-6 {
+		syntax: "<color>";
+		initial-value: #514ec7;
+		inherits: true;
+	}
+
+	@property --db-brand-7 {
+		syntax: "<color>";
+		initial-value: #6d6bd4;
+		inherits: true;
+	}
+
+	@property --db-brand-8 {
+		syntax: "<color>";
+		initial-value: #8988de;
+		inherits: true;
+	}
+
+	@property --db-brand-9 {
+		syntax: "<color>";
+		initial-value: #a6a5e7;
+		inherits: true;
+	}
+
+	@property --db-brand-10 {
+		syntax: "<color>";
+		initial-value: #c3c3ef;
+		inherits: true;
+	}
+
+	@property --db-brand-11 {
+		syntax: "<color>";
+		initial-value: #e1e1f7;
+		inherits: true;
+	}
+
+	@property --db-brand-12 {
+		syntax: "<color>";
+		initial-value: #ededfa;
+		inherits: true;
+	}
+
+	@property --db-brand-13 {
+		syntax: "<color>";
+		initial-value: #f3f3fc;
+		inherits: true;
+	}
+
+	@property --db-brand-14 {
+		syntax: "<color>";
+		initial-value: #f9f9fd;
+		inherits: true;
+	}
+
+	@property --db-brand-origin {
+		syntax: "<color>";
+		initial-value: #514ec7;
+		inherits: true;
+	}
+
+	@property --db-brand-origin-light-default {
+		syntax: "<color>";
+		initial-value: #514ec7;
+		inherits: true;
+	}
+
+	@property --db-brand-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #3834ac;
+		inherits: true;
+	}
+
+	@property --db-brand-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #25237b;
+		inherits: true;
+	}
+
+	@property --db-brand-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #cbffe7;
+		inherits: true;
+	}
+
+	@property --db-brand-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #d5d5f3;
+		inherits: true;
+	}
+
+	@property --db-brand-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #b7b7ec;
+		inherits: true;
+	}
+
+	@property --db-brand-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #514ec7;
+		inherits: true;
+	}
+
+	@property --db-brand-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #6d6bd4;
+		inherits: true;
+	}
+
+	@property --db-brand-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #8988de;
+		inherits: true;
+	}
+
+	@property --db-brand-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #cbffe7;
+		inherits: true;
+	}
+
+	@property --db-brand-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #d5d5f3;
+		inherits: true;
+	}
+
+	@property --db-brand-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #b7b7ec;
+		inherits: true;
+	}
+
+	@property --db-informational-0 {
+		syntax: "<color>";
+		initial-value: #03080a;
+		inherits: true;
+	}
+
+	@property --db-informational-1 {
+		syntax: "<color>";
+		initial-value: #051011;
+		inherits: true;
+	}
+
+	@property --db-informational-2 {
+		syntax: "<color>";
+		initial-value: #081517;
+		inherits: true;
+	}
+
+	@property --db-informational-3 {
+		syntax: "<color>";
+		initial-value: #0d1e20;
+		inherits: true;
+	}
+
+	@property --db-informational-4 {
+		syntax: "<color>";
+		initial-value: #1a3438;
+		inherits: true;
+	}
+
+	@property --db-informational-5 {
+		syntax: "<color>";
+		initial-value: #294c51;
+		inherits: true;
+	}
+
+	@property --db-informational-6 {
+		syntax: "<color>";
+		initial-value: #38656b;
+		inherits: true;
+	}
+
+	@property --db-informational-7 {
+		syntax: "<color>";
+		initial-value: #487f87;
+		inherits: true;
+	}
+
+	@property --db-informational-8 {
+		syntax: "<color>";
+		initial-value: #599ba3;
+		inherits: true;
+	}
+
+	@property --db-informational-9 {
+		syntax: "<color>";
+		initial-value: #6ab7c1;
+		inherits: true;
+	}
+
+	@property --db-informational-10 {
+		syntax: "<color>";
+		initial-value: #7bd4e0;
+		inherits: true;
+	}
+
+	@property --db-informational-11 {
+		syntax: "<color>";
+		initial-value: #b1edf6;
+		inherits: true;
+	}
+
+	@property --db-informational-12 {
+		syntax: "<color>";
+		initial-value: #d3f4f9;
+		inherits: true;
+	}
+
+	@property --db-informational-13 {
+		syntax: "<color>";
+		initial-value: #e2f7fb;
+		inherits: true;
+	}
+
+	@property --db-informational-14 {
+		syntax: "<color>";
+		initial-value: #f1fbfd;
+		inherits: true;
+	}
+
+	@property --db-informational-origin {
+		syntax: "<color>";
+		initial-value: #7fdae6;
+		inherits: true;
+	}
+
+	@property --db-informational-origin-light-default {
+		syntax: "<color>";
+		initial-value: #7fdae6;
+		inherits: true;
+	}
+
+	@property --db-informational-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #6dbdc7;
+		inherits: true;
+	}
+
+	@property --db-informational-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #5ca0a9;
+		inherits: true;
+	}
+
+	@property --db-informational-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #03080a;
+		inherits: true;
+	}
+
+	@property --db-informational-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #0f2225;
+		inherits: true;
+	}
+
+	@property --db-informational-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #1d393c;
+		inherits: true;
+	}
+
+	@property --db-informational-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #7fdae6;
+		inherits: true;
+	}
+
+	@property --db-informational-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #6dbdc7;
+		inherits: true;
+	}
+
+	@property --db-informational-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #5ca0a9;
+		inherits: true;
+	}
+
+	@property --db-informational-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #03080a;
+		inherits: true;
+	}
+
+	@property --db-informational-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #0f2225;
+		inherits: true;
+	}
+
+	@property --db-informational-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #1d393c;
+		inherits: true;
+	}
+
+	@property --db-warning-0 {
+		syntax: "<color>";
+		initial-value: #100500;
+		inherits: true;
+	}
+
+	@property --db-warning-1 {
+		syntax: "<color>";
+		initial-value: #1a0a01;
+		inherits: true;
+	}
+
+	@property --db-warning-2 {
+		syntax: "<color>";
+		initial-value: #210f01;
+		inherits: true;
+	}
+
+	@property --db-warning-3 {
+		syntax: "<color>";
+		initial-value: #2d1602;
+		inherits: true;
+	}
+
+	@property --db-warning-4 {
+		syntax: "<color>";
+		initial-value: #4b2806;
+		inherits: true;
+	}
+
+	@property --db-warning-5 {
+		syntax: "<color>";
+		initial-value: #6b3b0c;
+		inherits: true;
+	}
+
+	@property --db-warning-6 {
+		syntax: "<color>";
+		initial-value: #8c4f14;
+		inherits: true;
+	}
+
+	@property --db-warning-7 {
+		syntax: "<color>";
+		initial-value: #af641c;
+		inherits: true;
+	}
+
+	@property --db-warning-8 {
+		syntax: "<color>";
+		initial-value: #d47a24;
+		inherits: true;
+	}
+
+	@property --db-warning-9 {
+		syntax: "<color>";
+		initial-value: #f9912c;
+		inherits: true;
+	}
+
+	@property --db-warning-10 {
+		syntax: "<color>";
+		initial-value: #fcb791;
+		inherits: true;
+	}
+
+	@property --db-warning-11 {
+		syntax: "<color>";
+		initial-value: #fddccd;
+		inherits: true;
+	}
+
+	@property --db-warning-12 {
+		syntax: "<color>";
+		initial-value: #feeae1;
+		inherits: true;
+	}
+
+	@property --db-warning-13 {
+		syntax: "<color>";
+		initial-value: #fef1eb;
+		inherits: true;
+	}
+
+	@property --db-warning-14 {
+		syntax: "<color>";
+		initial-value: #fff8f5;
+		inherits: true;
+	}
+
+	@property --db-warning-origin {
+		syntax: "<color>";
+		initial-value: #fb9846;
+		inherits: true;
+	}
+
+	@property --db-warning-origin-light-default {
+		syntax: "<color>";
+		initial-value: #fb9846;
+		inherits: true;
+	}
+
+	@property --db-warning-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #db7f25;
+		inherits: true;
+	}
+
+	@property --db-warning-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #b6681d;
+		inherits: true;
+	}
+
+	@property --db-warning-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #100500;
+		inherits: true;
+	}
+
+	@property --db-warning-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #331903;
+		inherits: true;
+	}
+
+	@property --db-warning-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #512b07;
+		inherits: true;
+	}
+
+	@property --db-warning-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #fb9846;
+		inherits: true;
+	}
+
+	@property --db-warning-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #fcbe9d;
+		inherits: true;
+	}
+
+	@property --db-warning-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #fde2d6;
+		inherits: true;
+	}
+
+	@property --db-warning-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #100500;
+		inherits: true;
+	}
+
+	@property --db-warning-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #331903;
+		inherits: true;
+	}
+
+	@property --db-warning-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #512b07;
+		inherits: true;
+	}
+
+	@property --db-successful-0 {
+		syntax: "<color>";
+		initial-value: #040901;
+		inherits: true;
+	}
+
+	@property --db-successful-1 {
+		syntax: "<color>";
+		initial-value: #091002;
+		inherits: true;
+	}
+
+	@property --db-successful-2 {
+		syntax: "<color>";
+		initial-value: #0d1603;
+		inherits: true;
+	}
+
+	@property --db-successful-3 {
+		syntax: "<color>";
+		initial-value: #131f06;
+		inherits: true;
+	}
+
+	@property --db-successful-4 {
+		syntax: "<color>";
+		initial-value: #24350f;
+		inherits: true;
+	}
+
+	@property --db-successful-5 {
+		syntax: "<color>";
+		initial-value: #364d19;
+		inherits: true;
+	}
+
+	@property --db-successful-6 {
+		syntax: "<color>";
+		initial-value: #496724;
+		inherits: true;
+	}
+
+	@property --db-successful-7 {
+		syntax: "<color>";
+		initial-value: #5d8230;
+		inherits: true;
+	}
+
+	@property --db-successful-8 {
+		syntax: "<color>";
+		initial-value: #729d3c;
+		inherits: true;
+	}
+
+	@property --db-successful-9 {
+		syntax: "<color>";
+		initial-value: #87ba48;
+		inherits: true;
+	}
+
+	@property --db-successful-10 {
+		syntax: "<color>";
+		initial-value: #9dd755;
+		inherits: true;
+	}
+
+	@property --db-successful-11 {
+		syntax: "<color>";
+		initial-value: #b4f662;
+		inherits: true;
+	}
+
+	@property --db-successful-12 {
+		syntax: "<color>";
+		initial-value: #cdfca0;
+		inherits: true;
+	}
+
+	@property --db-successful-13 {
+		syntax: "<color>";
+		initial-value: #dffdc5;
+		inherits: true;
+	}
+
+	@property --db-successful-14 {
+		syntax: "<color>";
+		initial-value: #effee4;
+		inherits: true;
+	}
+
+	@property --db-successful-origin {
+		syntax: "<color>";
+		initial-value: #a8e65b;
+		inherits: true;
+	}
+
+	@property --db-successful-origin-light-default {
+		syntax: "<color>";
+		initial-value: #a8e65b;
+		inherits: true;
+	}
+
+	@property --db-successful-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #92c84e;
+		inherits: true;
+	}
+
+	@property --db-successful-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #7cab42;
+		inherits: true;
+	}
+
+	@property --db-successful-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #040901;
+		inherits: true;
+	}
+
+	@property --db-successful-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #172307;
+		inherits: true;
+	}
+
+	@property --db-successful-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #283a11;
+		inherits: true;
+	}
+
+	@property --db-successful-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #a8e65b;
+		inherits: true;
+	}
+
+	@property --db-successful-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #92c84e;
+		inherits: true;
+	}
+
+	@property --db-successful-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #7cab42;
+		inherits: true;
+	}
+
+	@property --db-successful-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #040901;
+		inherits: true;
+	}
+
+	@property --db-successful-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #172307;
+		inherits: true;
+	}
+
+	@property --db-successful-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #283a11;
+		inherits: true;
+	}
+
+	@property --db-critical-0 {
+		syntax: "<color>";
+		initial-value: #180102;
+		inherits: true;
+	}
+
+	@property --db-critical-1 {
+		syntax: "<color>";
+		initial-value: #250204;
+		inherits: true;
+	}
+
+	@property --db-critical-2 {
+		syntax: "<color>";
+		initial-value: #2f0305;
+		inherits: true;
+	}
+
+	@property --db-critical-3 {
+		syntax: "<color>";
+		initial-value: #3d0509;
+		inherits: true;
+	}
+
+	@property --db-critical-4 {
+		syntax: "<color>";
+		initial-value: #630c15;
+		inherits: true;
+	}
+
+	@property --db-critical-5 {
+		syntax: "<color>";
+		initial-value: #8c1621;
+		inherits: true;
+	}
+
+	@property --db-critical-6 {
+		syntax: "<color>";
+		initial-value: #b71f2e;
+		inherits: true;
+	}
+
+	@property --db-critical-7 {
+		syntax: "<color>";
+		initial-value: #e42a3c;
+		inherits: true;
+	}
+
+	@property --db-critical-8 {
+		syntax: "<color>";
+		initial-value: #f45d66;
+		inherits: true;
+	}
+
+	@property --db-critical-9 {
+		syntax: "<color>";
+		initial-value: #f68d92;
+		inherits: true;
+	}
+
+	@property --db-critical-10 {
+		syntax: "<color>";
+		initial-value: #f8b5b8;
+		inherits: true;
+	}
+
+	@property --db-critical-11 {
+		syntax: "<color>";
+		initial-value: #fbdbdc;
+		inherits: true;
+	}
+
+	@property --db-critical-12 {
+		syntax: "<color>";
+		initial-value: #fde9ea;
+		inherits: true;
+	}
+
+	@property --db-critical-13 {
+		syntax: "<color>";
+		initial-value: #fdf1f1;
+		inherits: true;
+	}
+
+	@property --db-critical-14 {
+		syntax: "<color>";
+		initial-value: #fef8f8;
+		inherits: true;
+	}
+
+	@property --db-critical-origin {
+		syntax: "<color>";
+		initial-value: #ed2c3f;
+		inherits: true;
+	}
+
+	@property --db-critical-origin-light-default {
+		syntax: "<color>";
+		initial-value: #ed2c3f;
+		inherits: true;
+	}
+
+	@property --db-critical-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #c02231;
+		inherits: true;
+	}
+
+	@property --db-critical-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #941824;
+		inherits: true;
+	}
+
+	@property --db-critical-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #180102;
+		inherits: true;
+	}
+
+	@property --db-critical-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #45060b;
+		inherits: true;
+	}
+
+	@property --db-critical-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #6b0e17;
+		inherits: true;
+	}
+
+	@property --db-critical-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #ed2c3f;
+		inherits: true;
+	}
+
+	@property --db-critical-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #f56870;
+		inherits: true;
+	}
+
+	@property --db-critical-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #f7969a;
+		inherits: true;
+	}
+
+	@property --db-critical-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #180102;
+		inherits: true;
+	}
+
+	@property --db-critical-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #45060b;
+		inherits: true;
+	}
+
+	@property --db-critical-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #6b0e17;
+		inherits: true;
+	}
+}
+
+@mixin get-additional-color-palette {
+	@property --db-yellow-0 {
+		syntax: "<color>";
+		initial-value: #080800;
+		inherits: true;
+	}
+
+	@property --db-yellow-1 {
+		syntax: "<color>";
+		initial-value: #0f0f00;
+		inherits: true;
+	}
+
+	@property --db-yellow-2 {
+		syntax: "<color>";
+		initial-value: #141400;
+		inherits: true;
+	}
+
+	@property --db-yellow-3 {
+		syntax: "<color>";
+		initial-value: #1c1d00;
+		inherits: true;
+	}
+
+	@property --db-yellow-4 {
+		syntax: "<color>";
+		initial-value: #323200;
+		inherits: true;
+	}
+
+	@property --db-yellow-5 {
+		syntax: "<color>";
+		initial-value: #494900;
+		inherits: true;
+	}
+
+	@property --db-yellow-6 {
+		syntax: "<color>";
+		initial-value: #616200;
+		inherits: true;
+	}
+
+	@property --db-yellow-7 {
+		syntax: "<color>";
+		initial-value: #7a7b00;
+		inherits: true;
+	}
+
+	@property --db-yellow-8 {
+		syntax: "<color>";
+		initial-value: #949600;
+		inherits: true;
+	}
+
+	@property --db-yellow-9 {
+		syntax: "<color>";
+		initial-value: #b0b100;
+		inherits: true;
+	}
+
+	@property --db-yellow-10 {
+		syntax: "<color>";
+		initial-value: #cccd00;
+		inherits: true;
+	}
+
+	@property --db-yellow-11 {
+		syntax: "<color>";
+		initial-value: #e8ea00;
+		inherits: true;
+	}
+
+	@property --db-yellow-12 {
+		syntax: "<color>";
+		initial-value: #f4f600;
+		inherits: true;
+	}
+
+	@property --db-yellow-13 {
+		syntax: "<color>";
+		initial-value: #fafc00;
+		inherits: true;
+	}
+
+	@property --db-yellow-14 {
+		syntax: "<color>";
+		initial-value: #fdff9d;
+		inherits: true;
+	}
+
+	@property --db-yellow-origin {
+		syntax: "<color>";
+		initial-value: #fdff6b;
+		inherits: true;
+	}
+
+	@property --db-yellow-origin-light-default {
+		syntax: "<color>";
+		initial-value: #fdff6b;
+		inherits: true;
+	}
+
+	@property --db-yellow-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #e1e300;
+		inherits: true;
+	}
+
+	@property --db-yellow-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #c4c600;
+		inherits: true;
+	}
+
+	@property --db-yellow-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #080800;
+		inherits: true;
+	}
+
+	@property --db-yellow-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #212100;
+		inherits: true;
+	}
+
+	@property --db-yellow-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #363700;
+		inherits: true;
+	}
+
+	@property --db-yellow-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #fdff6b;
+		inherits: true;
+	}
+
+	@property --db-yellow-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #e1e300;
+		inherits: true;
+	}
+
+	@property --db-yellow-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #c4c600;
+		inherits: true;
+	}
+
+	@property --db-yellow-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #080800;
+		inherits: true;
+	}
+
+	@property --db-yellow-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #212100;
+		inherits: true;
+	}
+
+	@property --db-yellow-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #363700;
+		inherits: true;
+	}
+
+	@property --db-orange-0 {
+		syntax: "<color>";
+		initial-value: #120400;
+		inherits: true;
+	}
+
+	@property --db-orange-1 {
+		syntax: "<color>";
+		initial-value: #1c0900;
+		inherits: true;
+	}
+
+	@property --db-orange-2 {
+		syntax: "<color>";
+		initial-value: #240d00;
+		inherits: true;
+	}
+
+	@property --db-orange-3 {
+		syntax: "<color>";
+		initial-value: #311300;
+		inherits: true;
+	}
+
+	@property --db-orange-4 {
+		syntax: "<color>";
+		initial-value: #502400;
+		inherits: true;
+	}
+
+	@property --db-orange-5 {
+		syntax: "<color>";
+		initial-value: #723600;
+		inherits: true;
+	}
+
+	@property --db-orange-6 {
+		syntax: "<color>";
+		initial-value: #954900;
+		inherits: true;
+	}
+
+	@property --db-orange-7 {
+		syntax: "<color>";
+		initial-value: #bb5d00;
+		inherits: true;
+	}
+
+	@property --db-orange-8 {
+		syntax: "<color>";
+		initial-value: #e17200;
+		inherits: true;
+	}
+
+	@property --db-orange-9 {
+		syntax: "<color>";
+		initial-value: #ff8d43;
+		inherits: true;
+	}
+
+	@property --db-orange-10 {
+		syntax: "<color>";
+		initial-value: #ffb597;
+		inherits: true;
+	}
+
+	@property --db-orange-11 {
+		syntax: "<color>";
+		initial-value: #ffdbcf;
+		inherits: true;
+	}
+
+	@property --db-orange-12 {
+		syntax: "<color>";
+		initial-value: #ffe9e3;
+		inherits: true;
+	}
+
+	@property --db-orange-13 {
+		syntax: "<color>";
+		initial-value: #fff1ec;
+		inherits: true;
+	}
+
+	@property --db-orange-14 {
+		syntax: "<color>";
+		initial-value: #fff8f6;
+		inherits: true;
+	}
+
+	@property --db-orange-origin {
+		syntax: "<color>";
+		initial-value: #ff904c;
+		inherits: true;
+	}
+
+	@property --db-orange-origin-light-default {
+		syntax: "<color>";
+		initial-value: #ff904c;
+		inherits: true;
+	}
+
+	@property --db-orange-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #e47300;
+		inherits: true;
+	}
+
+	@property --db-orange-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #bd5f00;
+		inherits: true;
+	}
+
+	@property --db-orange-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #120400;
+		inherits: true;
+	}
+
+	@property --db-orange-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #371700;
+		inherits: true;
+	}
+
+	@property --db-orange-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #562800;
+		inherits: true;
+	}
+
+	@property --db-orange-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #ff904c;
+		inherits: true;
+	}
+
+	@property --db-orange-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #ffb89b;
+		inherits: true;
+	}
+
+	@property --db-orange-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #ffddd2;
+		inherits: true;
+	}
+
+	@property --db-orange-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #120400;
+		inherits: true;
+	}
+
+	@property --db-orange-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #371700;
+		inherits: true;
+	}
+
+	@property --db-orange-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #562800;
+		inherits: true;
+	}
+
+	@property --db-red-0 {
+		syntax: "<color>";
+		initial-value: #180102;
+		inherits: true;
+	}
+
+	@property --db-red-1 {
+		syntax: "<color>";
+		initial-value: #250204;
+		inherits: true;
+	}
+
+	@property --db-red-2 {
+		syntax: "<color>";
+		initial-value: #2f0305;
+		inherits: true;
+	}
+
+	@property --db-red-3 {
+		syntax: "<color>";
+		initial-value: #3d0509;
+		inherits: true;
+	}
+
+	@property --db-red-4 {
+		syntax: "<color>";
+		initial-value: #630c15;
+		inherits: true;
+	}
+
+	@property --db-red-5 {
+		syntax: "<color>";
+		initial-value: #8c1621;
+		inherits: true;
+	}
+
+	@property --db-red-6 {
+		syntax: "<color>";
+		initial-value: #b71f2e;
+		inherits: true;
+	}
+
+	@property --db-red-7 {
+		syntax: "<color>";
+		initial-value: #e42a3c;
+		inherits: true;
+	}
+
+	@property --db-red-8 {
+		syntax: "<color>";
+		initial-value: #f45d66;
+		inherits: true;
+	}
+
+	@property --db-red-9 {
+		syntax: "<color>";
+		initial-value: #f68d92;
+		inherits: true;
+	}
+
+	@property --db-red-10 {
+		syntax: "<color>";
+		initial-value: #f8b5b8;
+		inherits: true;
+	}
+
+	@property --db-red-11 {
+		syntax: "<color>";
+		initial-value: #fbdbdc;
+		inherits: true;
+	}
+
+	@property --db-red-12 {
+		syntax: "<color>";
+		initial-value: #fde9ea;
+		inherits: true;
+	}
+
+	@property --db-red-13 {
+		syntax: "<color>";
+		initial-value: #fdf1f1;
+		inherits: true;
+	}
+
+	@property --db-red-14 {
+		syntax: "<color>";
+		initial-value: #fef8f8;
+		inherits: true;
+	}
+
+	@property --db-red-origin {
+		syntax: "<color>";
+		initial-value: #ed2c3f;
+		inherits: true;
+	}
+
+	@property --db-red-origin-light-default {
+		syntax: "<color>";
+		initial-value: #ed2c3f;
+		inherits: true;
+	}
+
+	@property --db-red-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #c02231;
+		inherits: true;
+	}
+
+	@property --db-red-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #941824;
+		inherits: true;
+	}
+
+	@property --db-red-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #180102;
+		inherits: true;
+	}
+
+	@property --db-red-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #45060b;
+		inherits: true;
+	}
+
+	@property --db-red-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #6b0e17;
+		inherits: true;
+	}
+
+	@property --db-red-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #ed2c3f;
+		inherits: true;
+	}
+
+	@property --db-red-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #f56870;
+		inherits: true;
+	}
+
+	@property --db-red-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #f7969a;
+		inherits: true;
+	}
+
+	@property --db-red-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #180102;
+		inherits: true;
+	}
+
+	@property --db-red-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #45060b;
+		inherits: true;
+	}
+
+	@property --db-red-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #6b0e17;
+		inherits: true;
+	}
+
+	@property --db-pink-0 {
+		syntax: "<color>";
+		initial-value: #150017;
+		inherits: true;
+	}
+
+	@property --db-pink-1 {
+		syntax: "<color>";
+		initial-value: #200023;
+		inherits: true;
+	}
+
+	@property --db-pink-2 {
+		syntax: "<color>";
+		initial-value: #29002c;
+		inherits: true;
+	}
+
+	@property --db-pink-3 {
+		syntax: "<color>";
+		initial-value: #37013b;
+		inherits: true;
+	}
+
+	@property --db-pink-4 {
+		syntax: "<color>";
+		initial-value: #59025f;
+		inherits: true;
+	}
+
+	@property --db-pink-5 {
+		syntax: "<color>";
+		initial-value: #7e0486;
+		inherits: true;
+	}
+
+	@property --db-pink-6 {
+		syntax: "<color>";
+		initial-value: #a507af;
+		inherits: true;
+	}
+
+	@property --db-pink-7 {
+		syntax: "<color>";
+		initial-value: #ce0cdb;
+		inherits: true;
+	}
+
+	@property --db-pink-8 {
+		syntax: "<color>";
+		initial-value: #ef36fd;
+		inherits: true;
+	}
+
+	@property --db-pink-9 {
+		syntax: "<color>";
+		initial-value: #f27dfe;
+		inherits: true;
+	}
+
+	@property --db-pink-10 {
+		syntax: "<color>";
+		initial-value: #f6adfe;
+		inherits: true;
+	}
+
+	@property --db-pink-11 {
+		syntax: "<color>";
+		initial-value: #fad7ff;
+		inherits: true;
+	}
+
+	@property --db-pink-12 {
+		syntax: "<color>";
+		initial-value: #fce7ff;
+		inherits: true;
+	}
+
+	@property --db-pink-13 {
+		syntax: "<color>";
+		initial-value: #fdefff;
+		inherits: true;
+	}
+
+	@property --db-pink-14 {
+		syntax: "<color>";
+		initial-value: #fef7ff;
+		inherits: true;
+	}
+
+	@property --db-pink-origin {
+		syntax: "<color>";
+		initial-value: #f38bfe;
+		inherits: true;
+	}
+
+	@property --db-pink-origin-light-default {
+		syntax: "<color>";
+		initial-value: #f38bfe;
+		inherits: true;
+	}
+
+	@property --db-pink-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #f04ffe;
+		inherits: true;
+	}
+
+	@property --db-pink-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #d90de6;
+		inherits: true;
+	}
+
+	@property --db-pink-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #150017;
+		inherits: true;
+	}
+
+	@property --db-pink-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #3d0142;
+		inherits: true;
+	}
+
+	@property --db-pink-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #600267;
+		inherits: true;
+	}
+
+	@property --db-pink-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #f38bfe;
+		inherits: true;
+	}
+
+	@property --db-pink-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #f7b9fe;
+		inherits: true;
+	}
+
+	@property --db-pink-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #fbe2ff;
+		inherits: true;
+	}
+
+	@property --db-pink-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #150017;
+		inherits: true;
+	}
+
+	@property --db-pink-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #3d0142;
+		inherits: true;
+	}
+
+	@property --db-pink-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #600267;
+		inherits: true;
+	}
+
+	@property --db-violet-0 {
+		syntax: "<color>";
+		initial-value: #0b021e;
+		inherits: true;
+	}
+
+	@property --db-violet-1 {
+		syntax: "<color>";
+		initial-value: #14052d;
+		inherits: true;
+	}
+
+	@property --db-violet-2 {
+		syntax: "<color>";
+		initial-value: #1a0738;
+		inherits: true;
+	}
+
+	@property --db-violet-3 {
+		syntax: "<color>";
+		initial-value: #240c49;
+		inherits: true;
+	}
+
+	@property --db-violet-4 {
+		syntax: "<color>";
+		initial-value: #3c1a75;
+		inherits: true;
+	}
+
+	@property --db-violet-5 {
+		syntax: "<color>";
+		initial-value: #5728a4;
+		inherits: true;
+	}
+
+	@property --db-violet-6 {
+		syntax: "<color>";
+		initial-value: #7337d6;
+		inherits: true;
+	}
+
+	@property --db-violet-7 {
+		syntax: "<color>";
+		initial-value: #885ce3;
+		inherits: true;
+	}
+
+	@property --db-violet-8 {
+		syntax: "<color>";
+		initial-value: #9d7eea;
+		inherits: true;
+	}
+
+	@property --db-violet-9 {
+		syntax: "<color>";
+		initial-value: #b49fef;
+		inherits: true;
+	}
+
+	@property --db-violet-10 {
+		syntax: "<color>";
+		initial-value: #ccbff4;
+		inherits: true;
+	}
+
+	@property --db-violet-11 {
+		syntax: "<color>";
+		initial-value: #e5dffa;
+		inherits: true;
+	}
+
+	@property --db-violet-12 {
+		syntax: "<color>";
+		initial-value: #efecfc;
+		inherits: true;
+	}
+
+	@property --db-violet-13 {
+		syntax: "<color>";
+		initial-value: #f4f2fd;
+		inherits: true;
+	}
+
+	@property --db-violet-14 {
+		syntax: "<color>";
+		initial-value: #faf9fe;
+		inherits: true;
+	}
+
+	@property --db-violet-origin {
+		syntax: "<color>";
+		initial-value: #b7a3f0;
+		inherits: true;
+	}
+
+	@property --db-violet-origin-light-default {
+		syntax: "<color>";
+		initial-value: #b7a3f0;
+		inherits: true;
+	}
+
+	@property --db-violet-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #a082ea;
+		inherits: true;
+	}
+
+	@property --db-violet-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #8b60e4;
+		inherits: true;
+	}
+
+	@property --db-violet-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #0b021e;
+		inherits: true;
+	}
+
+	@property --db-violet-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #280f51;
+		inherits: true;
+	}
+
+	@property --db-violet-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #411c7e;
+		inherits: true;
+	}
+
+	@property --db-violet-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #b7a3f0;
+		inherits: true;
+	}
+
+	@property --db-violet-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #cfc3f5;
+		inherits: true;
+	}
+
+	@property --db-violet-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #e8e3fa;
+		inherits: true;
+	}
+
+	@property --db-violet-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #0b021e;
+		inherits: true;
+	}
+
+	@property --db-violet-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #280f51;
+		inherits: true;
+	}
+
+	@property --db-violet-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #411c7e;
+		inherits: true;
+	}
+
+	@property --db-blue-0 {
+		syntax: "<color>";
+		initial-value: #010718;
+		inherits: true;
+	}
+
+	@property --db-blue-1 {
+		syntax: "<color>";
+		initial-value: #020d24;
+		inherits: true;
+	}
+
+	@property --db-blue-2 {
+		syntax: "<color>";
+		initial-value: #04122d;
+		inherits: true;
+	}
+
+	@property --db-blue-3 {
+		syntax: "<color>";
+		initial-value: #061a3c;
+		inherits: true;
+	}
+
+	@property --db-blue-4 {
+		syntax: "<color>";
+		initial-value: #102f61;
+		inherits: true;
+	}
+
+	@property --db-blue-5 {
+		syntax: "<color>";
+		initial-value: #1b4589;
+		inherits: true;
+	}
+
+	@property --db-blue-6 {
+		syntax: "<color>";
+		initial-value: #265cb3;
+		inherits: true;
+	}
+
+	@property --db-blue-7 {
+		syntax: "<color>";
+		initial-value: #3274df;
+		inherits: true;
+	}
+
+	@property --db-blue-8 {
+		syntax: "<color>";
+		initial-value: #5f8ef2;
+		inherits: true;
+	}
+
+	@property --db-blue-9 {
+		syntax: "<color>";
+		initial-value: #8da9f5;
+		inherits: true;
+	}
+
+	@property --db-blue-10 {
+		syntax: "<color>";
+		initial-value: #b5c5f9;
+		inherits: true;
+	}
+
+	@property --db-blue-11 {
+		syntax: "<color>";
+		initial-value: #dbe2fc;
+		inherits: true;
+	}
+
+	@property --db-blue-12 {
+		syntax: "<color>";
+		initial-value: #e9edfd;
+		inherits: true;
+	}
+
+	@property --db-blue-13 {
+		syntax: "<color>";
+		initial-value: #f1f3fe;
+		inherits: true;
+	}
+
+	@property --db-blue-14 {
+		syntax: "<color>";
+		initial-value: #f8f9fe;
+		inherits: true;
+	}
+
+	@property --db-blue-origin {
+		syntax: "<color>";
+		initial-value: #7a9df4;
+		inherits: true;
+	}
+
+	@property --db-blue-origin-light-default {
+		syntax: "<color>";
+		initial-value: #7a9df4;
+		inherits: true;
+	}
+
+	@property --db-blue-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #4582f0;
+		inherits: true;
+	}
+
+	@property --db-blue-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #2c69cb;
+		inherits: true;
+	}
+
+	@property --db-blue-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #010718;
+		inherits: true;
+	}
+
+	@property --db-blue-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #081e43;
+		inherits: true;
+	}
+
+	@property --db-blue-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #123369;
+		inherits: true;
+	}
+
+	@property --db-blue-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #7a9df4;
+		inherits: true;
+	}
+
+	@property --db-blue-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #a4b9f7;
+		inherits: true;
+	}
+
+	@property --db-blue-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #cad5fa;
+		inherits: true;
+	}
+
+	@property --db-blue-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #010718;
+		inherits: true;
+	}
+
+	@property --db-blue-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #081e43;
+		inherits: true;
+	}
+
+	@property --db-blue-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #123369;
+		inherits: true;
+	}
+
+	@property --db-cyan-0 {
+		syntax: "<color>";
+		initial-value: #03080a;
+		inherits: true;
+	}
+
+	@property --db-cyan-1 {
+		syntax: "<color>";
+		initial-value: #051011;
+		inherits: true;
+	}
+
+	@property --db-cyan-2 {
+		syntax: "<color>";
+		initial-value: #081517;
+		inherits: true;
+	}
+
+	@property --db-cyan-3 {
+		syntax: "<color>";
+		initial-value: #0d1e20;
+		inherits: true;
+	}
+
+	@property --db-cyan-4 {
+		syntax: "<color>";
+		initial-value: #1a3438;
+		inherits: true;
+	}
+
+	@property --db-cyan-5 {
+		syntax: "<color>";
+		initial-value: #294c51;
+		inherits: true;
+	}
+
+	@property --db-cyan-6 {
+		syntax: "<color>";
+		initial-value: #38656b;
+		inherits: true;
+	}
+
+	@property --db-cyan-7 {
+		syntax: "<color>";
+		initial-value: #487f87;
+		inherits: true;
+	}
+
+	@property --db-cyan-8 {
+		syntax: "<color>";
+		initial-value: #599ba3;
+		inherits: true;
+	}
+
+	@property --db-cyan-9 {
+		syntax: "<color>";
+		initial-value: #6ab7c1;
+		inherits: true;
+	}
+
+	@property --db-cyan-10 {
+		syntax: "<color>";
+		initial-value: #7bd4e0;
+		inherits: true;
+	}
+
+	@property --db-cyan-11 {
+		syntax: "<color>";
+		initial-value: #b1edf6;
+		inherits: true;
+	}
+
+	@property --db-cyan-12 {
+		syntax: "<color>";
+		initial-value: #d3f4f9;
+		inherits: true;
+	}
+
+	@property --db-cyan-13 {
+		syntax: "<color>";
+		initial-value: #e2f7fb;
+		inherits: true;
+	}
+
+	@property --db-cyan-14 {
+		syntax: "<color>";
+		initial-value: #f1fbfd;
+		inherits: true;
+	}
+
+	@property --db-cyan-origin {
+		syntax: "<color>";
+		initial-value: #7fdae6;
+		inherits: true;
+	}
+
+	@property --db-cyan-origin-light-default {
+		syntax: "<color>";
+		initial-value: #7fdae6;
+		inherits: true;
+	}
+
+	@property --db-cyan-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #6dbdc7;
+		inherits: true;
+	}
+
+	@property --db-cyan-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #5ca0a9;
+		inherits: true;
+	}
+
+	@property --db-cyan-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #03080a;
+		inherits: true;
+	}
+
+	@property --db-cyan-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #0f2225;
+		inherits: true;
+	}
+
+	@property --db-cyan-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #1d393c;
+		inherits: true;
+	}
+
+	@property --db-cyan-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #7fdae6;
+		inherits: true;
+	}
+
+	@property --db-cyan-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #6dbdc7;
+		inherits: true;
+	}
+
+	@property --db-cyan-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #5ca0a9;
+		inherits: true;
+	}
+
+	@property --db-cyan-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #03080a;
+		inherits: true;
+	}
+
+	@property --db-cyan-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #0f2225;
+		inherits: true;
+	}
+
+	@property --db-cyan-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #1d393c;
+		inherits: true;
+	}
+
+	@property --db-turquoise-0 {
+		syntax: "<color>";
+		initial-value: #000a05;
+		inherits: true;
+	}
+
+	@property --db-turquoise-1 {
+		syntax: "<color>";
+		initial-value: #00120a;
+		inherits: true;
+	}
+
+	@property --db-turquoise-2 {
+		syntax: "<color>";
+		initial-value: #00170e;
+		inherits: true;
+	}
+
+	@property --db-turquoise-3 {
+		syntax: "<color>";
+		initial-value: #002115;
+		inherits: true;
+	}
+
+	@property --db-turquoise-4 {
+		syntax: "<color>";
+		initial-value: #003827;
+		inherits: true;
+	}
+
+	@property --db-turquoise-5 {
+		syntax: "<color>";
+		initial-value: #00513a;
+		inherits: true;
+	}
+
+	@property --db-turquoise-6 {
+		syntax: "<color>";
+		initial-value: #006c4e;
+		inherits: true;
+	}
+
+	@property --db-turquoise-7 {
+		syntax: "<color>";
+		initial-value: #008863;
+		inherits: true;
+	}
+
+	@property --db-turquoise-8 {
+		syntax: "<color>";
+		initial-value: #00a579;
+		inherits: true;
+	}
+
+	@property --db-turquoise-9 {
+		syntax: "<color>";
+		initial-value: #00c290;
+		inherits: true;
+	}
+
+	@property --db-turquoise-10 {
+		syntax: "<color>";
+		initial-value: #00e1a7;
+		inherits: true;
+	}
+
+	@property --db-turquoise-11 {
+		syntax: "<color>";
+		initial-value: #3bffc1;
+		inherits: true;
+	}
+
+	@property --db-turquoise-12 {
+		syntax: "<color>";
+		initial-value: #abffdb;
+		inherits: true;
+	}
+
+	@property --db-turquoise-13 {
+		syntax: "<color>";
+		initial-value: #cbffe7;
+		inherits: true;
+	}
+
+	@property --db-turquoise-14 {
+		syntax: "<color>";
+		initial-value: #e6fff3;
+		inherits: true;
+	}
+
+	@property --db-turquoise-origin {
+		syntax: "<color>";
+		initial-value: #b8ffe0;
+		inherits: true;
+	}
+
+	@property --db-turquoise-origin-light-default {
+		syntax: "<color>";
+		initial-value: #b8ffe0;
+		inherits: true;
+	}
+
+	@property --db-turquoise-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #00f0b2;
+		inherits: true;
+	}
+
+	@property --db-turquoise-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #00d19b;
+		inherits: true;
+	}
+
+	@property --db-turquoise-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #000a05;
+		inherits: true;
+	}
+
+	@property --db-turquoise-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #002519;
+		inherits: true;
+	}
+
+	@property --db-turquoise-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #003d2b;
+		inherits: true;
+	}
+
+	@property --db-turquoise-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #b8ffe0;
+		inherits: true;
+	}
+
+	@property --db-turquoise-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #00f0b2;
+		inherits: true;
+	}
+
+	@property --db-turquoise-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #00d19b;
+		inherits: true;
+	}
+
+	@property --db-turquoise-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #000a05;
+		inherits: true;
+	}
+
+	@property --db-turquoise-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #002519;
+		inherits: true;
+	}
+
+	@property --db-turquoise-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #003d2b;
+		inherits: true;
+	}
+
+	@property --db-green-0 {
+		syntax: "<color>";
+		initial-value: #040901;
+		inherits: true;
+	}
+
+	@property --db-green-1 {
+		syntax: "<color>";
+		initial-value: #091002;
+		inherits: true;
+	}
+
+	@property --db-green-2 {
+		syntax: "<color>";
+		initial-value: #0d1603;
+		inherits: true;
+	}
+
+	@property --db-green-3 {
+		syntax: "<color>";
+		initial-value: #131f06;
+		inherits: true;
+	}
+
+	@property --db-green-4 {
+		syntax: "<color>";
+		initial-value: #24350f;
+		inherits: true;
+	}
+
+	@property --db-green-5 {
+		syntax: "<color>";
+		initial-value: #364d19;
+		inherits: true;
+	}
+
+	@property --db-green-6 {
+		syntax: "<color>";
+		initial-value: #496724;
+		inherits: true;
+	}
+
+	@property --db-green-7 {
+		syntax: "<color>";
+		initial-value: #5d8230;
+		inherits: true;
+	}
+
+	@property --db-green-8 {
+		syntax: "<color>";
+		initial-value: #729d3c;
+		inherits: true;
+	}
+
+	@property --db-green-9 {
+		syntax: "<color>";
+		initial-value: #87ba48;
+		inherits: true;
+	}
+
+	@property --db-green-10 {
+		syntax: "<color>";
+		initial-value: #9dd755;
+		inherits: true;
+	}
+
+	@property --db-green-11 {
+		syntax: "<color>";
+		initial-value: #b4f662;
+		inherits: true;
+	}
+
+	@property --db-green-12 {
+		syntax: "<color>";
+		initial-value: #cdfca0;
+		inherits: true;
+	}
+
+	@property --db-green-13 {
+		syntax: "<color>";
+		initial-value: #dffdc5;
+		inherits: true;
+	}
+
+	@property --db-green-14 {
+		syntax: "<color>";
+		initial-value: #effee4;
+		inherits: true;
+	}
+
+	@property --db-green-origin {
+		syntax: "<color>";
+		initial-value: #a8e65b;
+		inherits: true;
+	}
+
+	@property --db-green-origin-light-default {
+		syntax: "<color>";
+		initial-value: #a8e65b;
+		inherits: true;
+	}
+
+	@property --db-green-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #92c84e;
+		inherits: true;
+	}
+
+	@property --db-green-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #7cab42;
+		inherits: true;
+	}
+
+	@property --db-green-on-origin-light-default {
+		syntax: "<color>";
+		initial-value: #040901;
+		inherits: true;
+	}
+
+	@property --db-green-on-origin-light-hovered {
+		syntax: "<color>";
+		initial-value: #172307;
+		inherits: true;
+	}
+
+	@property --db-green-on-origin-light-pressed {
+		syntax: "<color>";
+		initial-value: #283a11;
+		inherits: true;
+	}
+
+	@property --db-green-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #a8e65b;
+		inherits: true;
+	}
+
+	@property --db-green-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #92c84e;
+		inherits: true;
+	}
+
+	@property --db-green-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #7cab42;
+		inherits: true;
+	}
+
+	@property --db-green-on-origin-dark-default {
+		syntax: "<color>";
+		initial-value: #040901;
+		inherits: true;
+	}
+
+	@property --db-green-on-origin-dark-hovered {
+		syntax: "<color>";
+		initial-value: #172307;
+		inherits: true;
+	}
+
+	@property --db-green-on-origin-dark-pressed {
+		syntax: "<color>";
+		initial-value: #283a11;
+		inherits: true;
+	}
+}