@bagelink/vue 1.15.82 → 1.15.86

package/src/styles/colors.css

@@ -4633,4 +4633,1118 @@
 
 .alpha-95 {
     background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 95%, transparent) !important;
-}
+}
+
+/* New role colors — utilities */
+/* Secondary */
+.bg-secondary {
+    background: var(--bgl-secondary) !important;
+    --alpha-color: var(--bgl-secondary);
+}
+
+.color-secondary {
+    color: var(--bgl-secondary) !important;
+}
+
+.bg-input-secondary input,
+.bg-input-secondary textarea,
+.bg-input-secondary .selectinput-btn {
+    background: var(--bgl-secondary) !important;
+}
+
+.border-secondary {
+    border-color: var(--bgl-secondary) !important;
+}
+
+.color-input-secondary input {
+    color: var(--bgl-secondary) !important;
+}
+
+/* secondary light */
+.bg-secondary-light {
+    background: var(--bgl-secondary-light) !important;
+    --alpha-color: var(--bgl-secondary-light);
+}
+
+.color-secondary-light {
+    color: var(--bgl-secondary-light) !important;
+}
+
+.bg-input-secondary-light input,
+.bg-input-secondary-light textarea,
+.bg-input-secondary-light .selectinput-btn {
+    background: var(--bgl-secondary-light) !important;
+}
+
+.border-secondary-light {
+    border-color: var(--bgl-secondary-light) !important;
+}
+
+.color-input-secondary-light input {
+    color: var(--bgl-secondary-light) !important;
+}
+
+/* secondary tint */
+.bg-secondary-tint {
+    background: var(--bgl-secondary-tint) !important;
+    --alpha-color: var(--bgl-secondary-tint);
+}
+
+.color-secondary-tint {
+    color: var(--bgl-secondary-tint) !important;
+}
+
+.bg-input-secondary-tint input,
+.bg-input-secondary-tint textarea,
+.bg-input-secondary-tint .selectinput-btn {
+    background: var(--bgl-secondary-tint) !important;
+}
+
+.border-secondary-tint {
+    border-color: var(--bgl-secondary-tint) !important;
+}
+
+.color-input-secondary-tint input {
+    color: var(--bgl-secondary-tint) !important;
+}
+
+.bg-secondary-10 {
+    background: var(--bgl-secondary-10) !important;
+    --alpha-color: var(--bgl-secondary-10);
+}
+
+.color-secondary-10 {
+    color: var(--bgl-secondary-10) !important;
+}
+
+.bg-input-secondary-10 input,
+.bg-input-secondary-10 textarea,
+.bg-input-secondary-10 .selectinput-btn {
+    background: var(--bgl-secondary-10) !important;
+}
+
+.border-secondary-10 {
+    border-color: var(--bgl-secondary-10) !important;
+}
+
+.color-input-secondary-10 input {
+    color: var(--bgl-secondary-10) !important;
+}
+
+.bg-secondary-20 {
+    background: var(--bgl-secondary-20) !important;
+    --alpha-color: var(--bgl-secondary-20);
+}
+
+.color-secondary-20 {
+    color: var(--bgl-secondary-20) !important;
+}
+
+.bg-input-secondary-20 input,
+.bg-input-secondary-20 textarea,
+.bg-input-secondary-20 .selectinput-btn {
+    background: var(--bgl-secondary-20) !important;
+}
+
+.border-secondary-20 {
+    border-color: var(--bgl-secondary-20) !important;
+}
+
+.color-input-secondary-20 input {
+    color: var(--bgl-secondary-20) !important;
+}
+
+.bg-secondary-30 {
+    background: var(--bgl-secondary-30) !important;
+    --alpha-color: var(--bgl-secondary-30);
+}
+
+.color-secondary-30 {
+    color: var(--bgl-secondary-30) !important;
+}
+
+.bg-input-secondary-30 input,
+.bg-input-secondary-30 textarea,
+.bg-input-secondary-30 .selectinput-btn {
+    background: var(--bgl-secondary-30) !important;
+}
+
+.border-secondary-30 {
+    border-color: var(--bgl-secondary-30) !important;
+}
+
+.color-input-secondary-30 input {
+    color: var(--bgl-secondary-30) !important;
+}
+
+.bg-secondary-40 {
+    background: var(--bgl-secondary-40) !important;
+    --alpha-color: var(--bgl-secondary-40);
+}
+
+.color-secondary-40 {
+    color: var(--bgl-secondary-40) !important;
+}
+
+.bg-input-secondary-40 input,
+.bg-input-secondary-40 textarea,
+.bg-input-secondary-40 .selectinput-btn {
+    background: var(--bgl-secondary-40) !important;
+}
+
+.border-secondary-40 {
+    border-color: var(--bgl-secondary-40) !important;
+}
+
+.color-input-secondary-40 input {
+    color: var(--bgl-secondary-40) !important;
+}
+
+.bg-secondary-50 {
+    background: var(--bgl-secondary-50) !important;
+    --alpha-color: var(--bgl-secondary-50);
+}
+
+.color-secondary-50 {
+    color: var(--bgl-secondary-50) !important;
+}
+
+.bg-input-secondary-50 input,
+.bg-input-secondary-50 textarea,
+.bg-input-secondary-50 .selectinput-btn {
+    background: var(--bgl-secondary-50) !important;
+}
+
+.border-secondary-50 {
+    border-color: var(--bgl-secondary-50) !important;
+}
+
+.color-input-secondary-50 input {
+    color: var(--bgl-secondary-50) !important;
+}
+
+.bg-secondary-60 {
+    background: var(--bgl-secondary-60) !important;
+    --alpha-color: var(--bgl-secondary-60);
+}
+
+.color-secondary-60 {
+    color: var(--bgl-secondary-60) !important;
+}
+
+.bg-input-secondary-60 input,
+.bg-input-secondary-60 textarea,
+.bg-input-secondary-60 .selectinput-btn {
+    background: var(--bgl-secondary-60) !important;
+}
+
+.border-secondary-60 {
+    border-color: var(--bgl-secondary-60) !important;
+}
+
+.color-input-secondary-60 input {
+    color: var(--bgl-secondary-60) !important;
+}
+
+.bg-secondary-70 {
+    background: var(--bgl-secondary-70) !important;
+    --alpha-color: var(--bgl-secondary-70);
+}
+
+.color-secondary-70 {
+    color: var(--bgl-secondary-70) !important;
+}
+
+.bg-input-secondary-70 input,
+.bg-input-secondary-70 textarea,
+.bg-input-secondary-70 .selectinput-btn {
+    background: var(--bgl-secondary-70) !important;
+}
+
+.border-secondary-70 {
+    border-color: var(--bgl-secondary-70) !important;
+}
+
+.color-input-secondary-70 input {
+    color: var(--bgl-secondary-70) !important;
+}
+
+.bg-secondary-80 {
+    background: var(--bgl-secondary-80) !important;
+    --alpha-color: var(--bgl-secondary-80);
+}
+
+.color-secondary-80 {
+    color: var(--bgl-secondary-80) !important;
+}
+
+.bg-input-secondary-80 input,
+.bg-input-secondary-80 textarea,
+.bg-input-secondary-80 .selectinput-btn {
+    background: var(--bgl-secondary-80) !important;
+}
+
+.border-secondary-80 {
+    border-color: var(--bgl-secondary-80) !important;
+}
+
+.color-input-secondary-80 input {
+    color: var(--bgl-secondary-80) !important;
+}
+
+.bg-secondary-90 {
+    background: var(--bgl-secondary-90) !important;
+    --alpha-color: var(--bgl-secondary-90);
+}
+
+.color-secondary-90 {
+    color: var(--bgl-secondary-90) !important;
+}
+
+.bg-input-secondary-90 input,
+.bg-input-secondary-90 textarea,
+.bg-input-secondary-90 .selectinput-btn {
+    background: var(--bgl-secondary-90) !important;
+}
+
+.border-secondary-90 {
+    border-color: var(--bgl-secondary-90) !important;
+}
+
+.color-input-secondary-90 input {
+    color: var(--bgl-secondary-90) !important;
+}
+
+.bg-secondary-100 {
+    background: var(--bgl-secondary-100) !important;
+    --alpha-color: var(--bgl-secondary-100);
+}
+
+.color-secondary-100 {
+    color: var(--bgl-secondary-100) !important;
+}
+
+.bg-input-secondary-100 input,
+.bg-input-secondary-100 textarea,
+.bg-input-secondary-100 .selectinput-btn {
+    background: var(--bgl-secondary-100) !important;
+}
+
+.border-secondary-100 {
+    border-color: var(--bgl-secondary-100) !important;
+}
+
+.color-input-secondary-100 input {
+    color: var(--bgl-secondary-100) !important;
+}
+
+.bg-secondary-110 {
+    background: var(--bgl-secondary-110) !important;
+    --alpha-color: var(--bgl-secondary-110);
+}
+
+.color-secondary-110 {
+    color: var(--bgl-secondary-110) !important;
+}
+
+.bg-input-secondary-110 input,
+.bg-input-secondary-110 textarea,
+.bg-input-secondary-110 .selectinput-btn {
+    background: var(--bgl-secondary-110) !important;
+}
+
+.border-secondary-110 {
+    border-color: var(--bgl-secondary-110) !important;
+}
+
+.color-input-secondary-110 input {
+    color: var(--bgl-secondary-110) !important;
+}
+
+.bg-secondary-120 {
+    background: var(--bgl-secondary-120) !important;
+    --alpha-color: var(--bgl-secondary-120);
+}
+
+.color-secondary-120 {
+    color: var(--bgl-secondary-120) !important;
+}
+
+.bg-input-secondary-120 input,
+.bg-input-secondary-120 textarea,
+.bg-input-secondary-120 .selectinput-btn {
+    background: var(--bgl-secondary-120) !important;
+}
+
+.border-secondary-120 {
+    border-color: var(--bgl-secondary-120) !important;
+}
+
+.color-input-secondary-120 input {
+    color: var(--bgl-secondary-120) !important;
+}
+
+.bg-secondary-130 {
+    background: var(--bgl-secondary-130) !important;
+    --alpha-color: var(--bgl-secondary-130);
+}
+
+.color-secondary-130 {
+    color: var(--bgl-secondary-130) !important;
+}
+
+.bg-input-secondary-130 input,
+.bg-input-secondary-130 textarea,
+.bg-input-secondary-130 .selectinput-btn {
+    background: var(--bgl-secondary-130) !important;
+}
+
+.border-secondary-130 {
+    border-color: var(--bgl-secondary-130) !important;
+}
+
+.color-input-secondary-130 input {
+    color: var(--bgl-secondary-130) !important;
+}
+
+/* Tertiary */
+.bg-tertiary {
+    background: var(--bgl-tertiary) !important;
+    --alpha-color: var(--bgl-tertiary);
+}
+
+.color-tertiary {
+    color: var(--bgl-tertiary) !important;
+}
+
+.bg-input-tertiary input,
+.bg-input-tertiary textarea,
+.bg-input-tertiary .selectinput-btn {
+    background: var(--bgl-tertiary) !important;
+}
+
+.border-tertiary {
+    border-color: var(--bgl-tertiary) !important;
+}
+
+.color-input-tertiary input {
+    color: var(--bgl-tertiary) !important;
+}
+
+/* tertiary light */
+.bg-tertiary-light {
+    background: var(--bgl-tertiary-light) !important;
+    --alpha-color: var(--bgl-tertiary-light);
+}
+
+.color-tertiary-light {
+    color: var(--bgl-tertiary-light) !important;
+}
+
+.bg-input-tertiary-light input,
+.bg-input-tertiary-light textarea,
+.bg-input-tertiary-light .selectinput-btn {
+    background: var(--bgl-tertiary-light) !important;
+}
+
+.border-tertiary-light {
+    border-color: var(--bgl-tertiary-light) !important;
+}
+
+.color-input-tertiary-light input {
+    color: var(--bgl-tertiary-light) !important;
+}
+
+/* tertiary tint */
+.bg-tertiary-tint {
+    background: var(--bgl-tertiary-tint) !important;
+    --alpha-color: var(--bgl-tertiary-tint);
+}
+
+.color-tertiary-tint {
+    color: var(--bgl-tertiary-tint) !important;
+}
+
+.bg-input-tertiary-tint input,
+.bg-input-tertiary-tint textarea,
+.bg-input-tertiary-tint .selectinput-btn {
+    background: var(--bgl-tertiary-tint) !important;
+}
+
+.border-tertiary-tint {
+    border-color: var(--bgl-tertiary-tint) !important;
+}
+
+.color-input-tertiary-tint input {
+    color: var(--bgl-tertiary-tint) !important;
+}
+
+.bg-tertiary-10 {
+    background: var(--bgl-tertiary-10) !important;
+    --alpha-color: var(--bgl-tertiary-10);
+}
+
+.color-tertiary-10 {
+    color: var(--bgl-tertiary-10) !important;
+}
+
+.bg-input-tertiary-10 input,
+.bg-input-tertiary-10 textarea,
+.bg-input-tertiary-10 .selectinput-btn {
+    background: var(--bgl-tertiary-10) !important;
+}
+
+.border-tertiary-10 {
+    border-color: var(--bgl-tertiary-10) !important;
+}
+
+.color-input-tertiary-10 input {
+    color: var(--bgl-tertiary-10) !important;
+}
+
+.bg-tertiary-20 {
+    background: var(--bgl-tertiary-20) !important;
+    --alpha-color: var(--bgl-tertiary-20);
+}
+
+.color-tertiary-20 {
+    color: var(--bgl-tertiary-20) !important;
+}
+
+.bg-input-tertiary-20 input,
+.bg-input-tertiary-20 textarea,
+.bg-input-tertiary-20 .selectinput-btn {
+    background: var(--bgl-tertiary-20) !important;
+}
+
+.border-tertiary-20 {
+    border-color: var(--bgl-tertiary-20) !important;
+}
+
+.color-input-tertiary-20 input {
+    color: var(--bgl-tertiary-20) !important;
+}
+
+.bg-tertiary-30 {
+    background: var(--bgl-tertiary-30) !important;
+    --alpha-color: var(--bgl-tertiary-30);
+}
+
+.color-tertiary-30 {
+    color: var(--bgl-tertiary-30) !important;
+}
+
+.bg-input-tertiary-30 input,
+.bg-input-tertiary-30 textarea,
+.bg-input-tertiary-30 .selectinput-btn {
+    background: var(--bgl-tertiary-30) !important;
+}
+
+.border-tertiary-30 {
+    border-color: var(--bgl-tertiary-30) !important;
+}
+
+.color-input-tertiary-30 input {
+    color: var(--bgl-tertiary-30) !important;
+}
+
+.bg-tertiary-40 {
+    background: var(--bgl-tertiary-40) !important;
+    --alpha-color: var(--bgl-tertiary-40);
+}
+
+.color-tertiary-40 {
+    color: var(--bgl-tertiary-40) !important;
+}
+
+.bg-input-tertiary-40 input,
+.bg-input-tertiary-40 textarea,
+.bg-input-tertiary-40 .selectinput-btn {
+    background: var(--bgl-tertiary-40) !important;
+}
+
+.border-tertiary-40 {
+    border-color: var(--bgl-tertiary-40) !important;
+}
+
+.color-input-tertiary-40 input {
+    color: var(--bgl-tertiary-40) !important;
+}
+
+.bg-tertiary-50 {
+    background: var(--bgl-tertiary-50) !important;
+    --alpha-color: var(--bgl-tertiary-50);
+}
+
+.color-tertiary-50 {
+    color: var(--bgl-tertiary-50) !important;
+}
+
+.bg-input-tertiary-50 input,
+.bg-input-tertiary-50 textarea,
+.bg-input-tertiary-50 .selectinput-btn {
+    background: var(--bgl-tertiary-50) !important;
+}
+
+.border-tertiary-50 {
+    border-color: var(--bgl-tertiary-50) !important;
+}
+
+.color-input-tertiary-50 input {
+    color: var(--bgl-tertiary-50) !important;
+}
+
+.bg-tertiary-60 {
+    background: var(--bgl-tertiary-60) !important;
+    --alpha-color: var(--bgl-tertiary-60);
+}
+
+.color-tertiary-60 {
+    color: var(--bgl-tertiary-60) !important;
+}
+
+.bg-input-tertiary-60 input,
+.bg-input-tertiary-60 textarea,
+.bg-input-tertiary-60 .selectinput-btn {
+    background: var(--bgl-tertiary-60) !important;
+}
+
+.border-tertiary-60 {
+    border-color: var(--bgl-tertiary-60) !important;
+}
+
+.color-input-tertiary-60 input {
+    color: var(--bgl-tertiary-60) !important;
+}
+
+.bg-tertiary-70 {
+    background: var(--bgl-tertiary-70) !important;
+    --alpha-color: var(--bgl-tertiary-70);
+}
+
+.color-tertiary-70 {
+    color: var(--bgl-tertiary-70) !important;
+}
+
+.bg-input-tertiary-70 input,
+.bg-input-tertiary-70 textarea,
+.bg-input-tertiary-70 .selectinput-btn {
+    background: var(--bgl-tertiary-70) !important;
+}
+
+.border-tertiary-70 {
+    border-color: var(--bgl-tertiary-70) !important;
+}
+
+.color-input-tertiary-70 input {
+    color: var(--bgl-tertiary-70) !important;
+}
+
+.bg-tertiary-80 {
+    background: var(--bgl-tertiary-80) !important;
+    --alpha-color: var(--bgl-tertiary-80);
+}
+
+.color-tertiary-80 {
+    color: var(--bgl-tertiary-80) !important;
+}
+
+.bg-input-tertiary-80 input,
+.bg-input-tertiary-80 textarea,
+.bg-input-tertiary-80 .selectinput-btn {
+    background: var(--bgl-tertiary-80) !important;
+}
+
+.border-tertiary-80 {
+    border-color: var(--bgl-tertiary-80) !important;
+}
+
+.color-input-tertiary-80 input {
+    color: var(--bgl-tertiary-80) !important;
+}
+
+.bg-tertiary-90 {
+    background: var(--bgl-tertiary-90) !important;
+    --alpha-color: var(--bgl-tertiary-90);
+}
+
+.color-tertiary-90 {
+    color: var(--bgl-tertiary-90) !important;
+}
+
+.bg-input-tertiary-90 input,
+.bg-input-tertiary-90 textarea,
+.bg-input-tertiary-90 .selectinput-btn {
+    background: var(--bgl-tertiary-90) !important;
+}
+
+.border-tertiary-90 {
+    border-color: var(--bgl-tertiary-90) !important;
+}
+
+.color-input-tertiary-90 input {
+    color: var(--bgl-tertiary-90) !important;
+}
+
+.bg-tertiary-100 {
+    background: var(--bgl-tertiary-100) !important;
+    --alpha-color: var(--bgl-tertiary-100);
+}
+
+.color-tertiary-100 {
+    color: var(--bgl-tertiary-100) !important;
+}
+
+.bg-input-tertiary-100 input,
+.bg-input-tertiary-100 textarea,
+.bg-input-tertiary-100 .selectinput-btn {
+    background: var(--bgl-tertiary-100) !important;
+}
+
+.border-tertiary-100 {
+    border-color: var(--bgl-tertiary-100) !important;
+}
+
+.color-input-tertiary-100 input {
+    color: var(--bgl-tertiary-100) !important;
+}
+
+.bg-tertiary-110 {
+    background: var(--bgl-tertiary-110) !important;
+    --alpha-color: var(--bgl-tertiary-110);
+}
+
+.color-tertiary-110 {
+    color: var(--bgl-tertiary-110) !important;
+}
+
+.bg-input-tertiary-110 input,
+.bg-input-tertiary-110 textarea,
+.bg-input-tertiary-110 .selectinput-btn {
+    background: var(--bgl-tertiary-110) !important;
+}
+
+.border-tertiary-110 {
+    border-color: var(--bgl-tertiary-110) !important;
+}
+
+.color-input-tertiary-110 input {
+    color: var(--bgl-tertiary-110) !important;
+}
+
+.bg-tertiary-120 {
+    background: var(--bgl-tertiary-120) !important;
+    --alpha-color: var(--bgl-tertiary-120);
+}
+
+.color-tertiary-120 {
+    color: var(--bgl-tertiary-120) !important;
+}
+
+.bg-input-tertiary-120 input,
+.bg-input-tertiary-120 textarea,
+.bg-input-tertiary-120 .selectinput-btn {
+    background: var(--bgl-tertiary-120) !important;
+}
+
+.border-tertiary-120 {
+    border-color: var(--bgl-tertiary-120) !important;
+}
+
+.color-input-tertiary-120 input {
+    color: var(--bgl-tertiary-120) !important;
+}
+
+.bg-tertiary-130 {
+    background: var(--bgl-tertiary-130) !important;
+    --alpha-color: var(--bgl-tertiary-130);
+}
+
+.color-tertiary-130 {
+    color: var(--bgl-tertiary-130) !important;
+}
+
+.bg-input-tertiary-130 input,
+.bg-input-tertiary-130 textarea,
+.bg-input-tertiary-130 .selectinput-btn {
+    background: var(--bgl-tertiary-130) !important;
+}
+
+.border-tertiary-130 {
+    border-color: var(--bgl-tertiary-130) !important;
+}
+
+.color-input-tertiary-130 input {
+    color: var(--bgl-tertiary-130) !important;
+}
+
+/* Quaternary */
+.bg-quaternary {
+    background: var(--bgl-quaternary) !important;
+    --alpha-color: var(--bgl-quaternary);
+}
+
+.color-quaternary {
+    color: var(--bgl-quaternary) !important;
+}
+
+.bg-input-quaternary input,
+.bg-input-quaternary textarea,
+.bg-input-quaternary .selectinput-btn {
+    background: var(--bgl-quaternary) !important;
+}
+
+.border-quaternary {
+    border-color: var(--bgl-quaternary) !important;
+}
+
+.color-input-quaternary input {
+    color: var(--bgl-quaternary) !important;
+}
+
+/* quaternary light */
+.bg-quaternary-light {
+    background: var(--bgl-quaternary-light) !important;
+    --alpha-color: var(--bgl-quaternary-light);
+}
+
+.color-quaternary-light {
+    color: var(--bgl-quaternary-light) !important;
+}
+
+.bg-input-quaternary-light input,
+.bg-input-quaternary-light textarea,
+.bg-input-quaternary-light .selectinput-btn {
+    background: var(--bgl-quaternary-light) !important;
+}
+
+.border-quaternary-light {
+    border-color: var(--bgl-quaternary-light) !important;
+}
+
+.color-input-quaternary-light input {
+    color: var(--bgl-quaternary-light) !important;
+}
+
+/* quaternary tint */
+.bg-quaternary-tint {
+    background: var(--bgl-quaternary-tint) !important;
+    --alpha-color: var(--bgl-quaternary-tint);
+}
+
+.color-quaternary-tint {
+    color: var(--bgl-quaternary-tint) !important;
+}
+
+.bg-input-quaternary-tint input,
+.bg-input-quaternary-tint textarea,
+.bg-input-quaternary-tint .selectinput-btn {
+    background: var(--bgl-quaternary-tint) !important;
+}
+
+.border-quaternary-tint {
+    border-color: var(--bgl-quaternary-tint) !important;
+}
+
+.color-input-quaternary-tint input {
+    color: var(--bgl-quaternary-tint) !important;
+}
+
+.bg-quaternary-10 {
+    background: var(--bgl-quaternary-10) !important;
+    --alpha-color: var(--bgl-quaternary-10);
+}
+
+.color-quaternary-10 {
+    color: var(--bgl-quaternary-10) !important;
+}
+
+.bg-input-quaternary-10 input,
+.bg-input-quaternary-10 textarea,
+.bg-input-quaternary-10 .selectinput-btn {
+    background: var(--bgl-quaternary-10) !important;
+}
+
+.border-quaternary-10 {
+    border-color: var(--bgl-quaternary-10) !important;
+}
+
+.color-input-quaternary-10 input {
+    color: var(--bgl-quaternary-10) !important;
+}
+
+.bg-quaternary-20 {
+    background: var(--bgl-quaternary-20) !important;
+    --alpha-color: var(--bgl-quaternary-20);
+}
+
+.color-quaternary-20 {
+    color: var(--bgl-quaternary-20) !important;
+}
+
+.bg-input-quaternary-20 input,
+.bg-input-quaternary-20 textarea,
+.bg-input-quaternary-20 .selectinput-btn {
+    background: var(--bgl-quaternary-20) !important;
+}
+
+.border-quaternary-20 {
+    border-color: var(--bgl-quaternary-20) !important;
+}
+
+.color-input-quaternary-20 input {
+    color: var(--bgl-quaternary-20) !important;
+}
+
+.bg-quaternary-30 {
+    background: var(--bgl-quaternary-30) !important;
+    --alpha-color: var(--bgl-quaternary-30);
+}
+
+.color-quaternary-30 {
+    color: var(--bgl-quaternary-30) !important;
+}
+
+.bg-input-quaternary-30 input,
+.bg-input-quaternary-30 textarea,
+.bg-input-quaternary-30 .selectinput-btn {
+    background: var(--bgl-quaternary-30) !important;
+}
+
+.border-quaternary-30 {
+    border-color: var(--bgl-quaternary-30) !important;
+}
+
+.color-input-quaternary-30 input {
+    color: var(--bgl-quaternary-30) !important;
+}
+
+.bg-quaternary-40 {
+    background: var(--bgl-quaternary-40) !important;
+    --alpha-color: var(--bgl-quaternary-40);
+}
+
+.color-quaternary-40 {
+    color: var(--bgl-quaternary-40) !important;
+}
+
+.bg-input-quaternary-40 input,
+.bg-input-quaternary-40 textarea,
+.bg-input-quaternary-40 .selectinput-btn {
+    background: var(--bgl-quaternary-40) !important;
+}
+
+.border-quaternary-40 {
+    border-color: var(--bgl-quaternary-40) !important;
+}
+
+.color-input-quaternary-40 input {
+    color: var(--bgl-quaternary-40) !important;
+}
+
+.bg-quaternary-50 {
+    background: var(--bgl-quaternary-50) !important;
+    --alpha-color: var(--bgl-quaternary-50);
+}
+
+.color-quaternary-50 {
+    color: var(--bgl-quaternary-50) !important;
+}
+
+.bg-input-quaternary-50 input,
+.bg-input-quaternary-50 textarea,
+.bg-input-quaternary-50 .selectinput-btn {
+    background: var(--bgl-quaternary-50) !important;
+}
+
+.border-quaternary-50 {
+    border-color: var(--bgl-quaternary-50) !important;
+}
+
+.color-input-quaternary-50 input {
+    color: var(--bgl-quaternary-50) !important;
+}
+
+.bg-quaternary-60 {
+    background: var(--bgl-quaternary-60) !important;
+    --alpha-color: var(--bgl-quaternary-60);
+}
+
+.color-quaternary-60 {
+    color: var(--bgl-quaternary-60) !important;
+}
+
+.bg-input-quaternary-60 input,
+.bg-input-quaternary-60 textarea,
+.bg-input-quaternary-60 .selectinput-btn {
+    background: var(--bgl-quaternary-60) !important;
+}
+
+.border-quaternary-60 {
+    border-color: var(--bgl-quaternary-60) !important;
+}
+
+.color-input-quaternary-60 input {
+    color: var(--bgl-quaternary-60) !important;
+}
+
+.bg-quaternary-70 {
+    background: var(--bgl-quaternary-70) !important;
+    --alpha-color: var(--bgl-quaternary-70);
+}
+
+.color-quaternary-70 {
+    color: var(--bgl-quaternary-70) !important;
+}
+
+.bg-input-quaternary-70 input,
+.bg-input-quaternary-70 textarea,
+.bg-input-quaternary-70 .selectinput-btn {
+    background: var(--bgl-quaternary-70) !important;
+}
+
+.border-quaternary-70 {
+    border-color: var(--bgl-quaternary-70) !important;
+}
+
+.color-input-quaternary-70 input {
+    color: var(--bgl-quaternary-70) !important;
+}
+
+.bg-quaternary-80 {
+    background: var(--bgl-quaternary-80) !important;
+    --alpha-color: var(--bgl-quaternary-80);
+}
+
+.color-quaternary-80 {
+    color: var(--bgl-quaternary-80) !important;
+}
+
+.bg-input-quaternary-80 input,
+.bg-input-quaternary-80 textarea,
+.bg-input-quaternary-80 .selectinput-btn {
+    background: var(--bgl-quaternary-80) !important;
+}
+
+.border-quaternary-80 {
+    border-color: var(--bgl-quaternary-80) !important;
+}
+
+.color-input-quaternary-80 input {
+    color: var(--bgl-quaternary-80) !important;
+}
+
+.bg-quaternary-90 {
+    background: var(--bgl-quaternary-90) !important;
+    --alpha-color: var(--bgl-quaternary-90);
+}
+
+.color-quaternary-90 {
+    color: var(--bgl-quaternary-90) !important;
+}
+
+.bg-input-quaternary-90 input,
+.bg-input-quaternary-90 textarea,
+.bg-input-quaternary-90 .selectinput-btn {
+    background: var(--bgl-quaternary-90) !important;
+}
+
+.border-quaternary-90 {
+    border-color: var(--bgl-quaternary-90) !important;
+}
+
+.color-input-quaternary-90 input {
+    color: var(--bgl-quaternary-90) !important;
+}
+
+.bg-quaternary-100 {
+    background: var(--bgl-quaternary-100) !important;
+    --alpha-color: var(--bgl-quaternary-100);
+}
+
+.color-quaternary-100 {
+    color: var(--bgl-quaternary-100) !important;
+}
+
+.bg-input-quaternary-100 input,
+.bg-input-quaternary-100 textarea,
+.bg-input-quaternary-100 .selectinput-btn {
+    background: var(--bgl-quaternary-100) !important;
+}
+
+.border-quaternary-100 {
+    border-color: var(--bgl-quaternary-100) !important;
+}
+
+.color-input-quaternary-100 input {
+    color: var(--bgl-quaternary-100) !important;
+}
+
+.bg-quaternary-110 {
+    background: var(--bgl-quaternary-110) !important;
+    --alpha-color: var(--bgl-quaternary-110);
+}
+
+.color-quaternary-110 {
+    color: var(--bgl-quaternary-110) !important;
+}
+
+.bg-input-quaternary-110 input,
+.bg-input-quaternary-110 textarea,
+.bg-input-quaternary-110 .selectinput-btn {
+    background: var(--bgl-quaternary-110) !important;
+}
+
+.border-quaternary-110 {
+    border-color: var(--bgl-quaternary-110) !important;
+}
+
+.color-input-quaternary-110 input {
+    color: var(--bgl-quaternary-110) !important;
+}
+
+.bg-quaternary-120 {
+    background: var(--bgl-quaternary-120) !important;
+    --alpha-color: var(--bgl-quaternary-120);
+}
+
+.color-quaternary-120 {
+    color: var(--bgl-quaternary-120) !important;
+}
+
+.bg-input-quaternary-120 input,
+.bg-input-quaternary-120 textarea,
+.bg-input-quaternary-120 .selectinput-btn {
+    background: var(--bgl-quaternary-120) !important;
+}
+
+.border-quaternary-120 {
+    border-color: var(--bgl-quaternary-120) !important;
+}
+
+.color-input-quaternary-120 input {
+    color: var(--bgl-quaternary-120) !important;
+}
+
+.bg-quaternary-130 {
+    background: var(--bgl-quaternary-130) !important;
+    --alpha-color: var(--bgl-quaternary-130);
+}
+
+.color-quaternary-130 {
+    color: var(--bgl-quaternary-130) !important;
+}
+
+.bg-input-quaternary-130 input,
+.bg-input-quaternary-130 textarea,
+.bg-input-quaternary-130 .selectinput-btn {
+    background: var(--bgl-quaternary-130) !important;
+}
+
+.border-quaternary-130 {
+    border-color: var(--bgl-quaternary-130) !important;
+}
+
+.color-input-quaternary-130 input {
+    color: var(--bgl-quaternary-130) !important;
+}