@bagelink/vue 1.15.82 → 1.15.88

package/src/styles/buttons.css

@@ -52,10 +52,12 @@
 .btn-close:hover {
     background: var(--bgl-gray-light);
     opacity: 1;
+    filter: var(--bgl-hover-filter);
 }
 
 .btn-close:active {
     background: var(--bgl-gray);
+    filter: var(--bgl-active-filter);
 }
 
 .btn-close::before {
@@ -70,12 +72,12 @@
 }
 
 .hover:hover {
-    filter: brightness(90%);
+    filter: var(--bgl-hover-filter);
 }
 
 
 .hover:active {
-    filter: brightness(80%);
+    filter: var(--bgl-active-filter);
 }
 
 .hover-transparent:hover,
@@ -179,6 +181,26 @@
     border: 1px solid var(--bgl-border-color);
 }
 
+.border-1 {
+    border-width: 1px !important;
+    border-style: solid !important;
+}
+
+.border-2 {
+    border-width: 2px !important;
+    border-style: solid !important;
+}
+
+.border-3 {
+    border-width: 3px !important;
+    border-style: solid !important;
+}
+
+.border-4 {
+    border-width: 4px !important;
+    border-style: solid !important;
+}
+
 .outline {
     outline: 1px solid var(--bgl-border-color);
 }
@@ -248,6 +270,26 @@
     .m_rotate-0 {
         transform: rotate(0deg) !important;
     }
+
+    .m_border-1 {
+        border-width: 1px !important;
+        border-style: solid !important;
+    }
+
+    .m_border-2 {
+        border-width: 2px !important;
+        border-style: solid !important;
+    }
+
+    .m_border-3 {
+        border-width: 3px !important;
+        border-style: solid !important;
+    }
+
+    .m_border-4 {
+        border-width: 4px !important;
+        border-style: solid !important;
+    }
 }
 
 .ripple {

package/src/styles/color-variants.css

@@ -14,79 +14,85 @@
  * color-mix(). One rule covers all 13 tones × all 13 shades.
  * ──────────────────────────────────────────────────────────────────────────── */
 
-/* 1) Map every pair tone (base + 10..130 + light/tint/dark + semantic) to a
- *    single --bgl-pair-tone custom property. */
+/* 1) Map every pair tone to a --bgl-pair-tone custom property that soft / frost /
+ *    gradient read from.
+ *
+ *    Base + light/tint/dark/semantic aliases map to the BASE token. Each numeric
+ *    shade (10..130) maps to ITS OWN shade token, so `pair-<tone>-<shade>` +
+ *    soft/frost/gradient honour the shade instead of collapsing back to the base
+ *    tone. (e.g. `<Card color="black-110" gradient>` now sweeps the -110 navy,
+ *    not plain --bgl-black.) */
 .pair-primary, .pair-default,
-.pair-primary-light, .pair-primary-tint,
-.pair-primary-10, .pair-primary-20, .pair-primary-30, .pair-primary-40, .pair-primary-50,
-.pair-primary-60, .pair-primary-70, .pair-primary-80, .pair-primary-90, .pair-primary-100,
-.pair-primary-110, .pair-primary-120, .pair-primary-130 { --bgl-pair-tone: var(--bgl-primary); }
+.pair-primary-light, .pair-primary-tint { --bgl-pair-tone: var(--bgl-primary); }
+.pair-primary-10 { --bgl-pair-tone: var(--bgl-primary-10); } .pair-primary-20 { --bgl-pair-tone: var(--bgl-primary-20); } .pair-primary-30 { --bgl-pair-tone: var(--bgl-primary-30); } .pair-primary-40 { --bgl-pair-tone: var(--bgl-primary-40); } .pair-primary-50 { --bgl-pair-tone: var(--bgl-primary-50); }
+.pair-primary-60 { --bgl-pair-tone: var(--bgl-primary-60); } .pair-primary-70 { --bgl-pair-tone: var(--bgl-primary-70); } .pair-primary-80 { --bgl-pair-tone: var(--bgl-primary-80); } .pair-primary-90 { --bgl-pair-tone: var(--bgl-primary-90); } .pair-primary-100 { --bgl-pair-tone: var(--bgl-primary-100); }
+.pair-primary-110 { --bgl-pair-tone: var(--bgl-primary-110); } .pair-primary-120 { --bgl-pair-tone: var(--bgl-primary-120); } .pair-primary-130 { --bgl-pair-tone: var(--bgl-primary-130); }
 
 .pair-blue, .pair-info,
-.pair-blue-light, .pair-blue-tint, .pair-blue-dark,
-.pair-blue-10, .pair-blue-20, .pair-blue-30, .pair-blue-40, .pair-blue-50,
-.pair-blue-60, .pair-blue-70, .pair-blue-80, .pair-blue-90, .pair-blue-100,
-.pair-blue-110, .pair-blue-120, .pair-blue-130 { --bgl-pair-tone: var(--bgl-blue); }
+.pair-blue-light, .pair-blue-tint, .pair-blue-dark { --bgl-pair-tone: var(--bgl-blue); }
+.pair-blue-10 { --bgl-pair-tone: var(--bgl-blue-10); } .pair-blue-20 { --bgl-pair-tone: var(--bgl-blue-20); } .pair-blue-30 { --bgl-pair-tone: var(--bgl-blue-30); } .pair-blue-40 { --bgl-pair-tone: var(--bgl-blue-40); } .pair-blue-50 { --bgl-pair-tone: var(--bgl-blue-50); }
+.pair-blue-60 { --bgl-pair-tone: var(--bgl-blue-60); } .pair-blue-70 { --bgl-pair-tone: var(--bgl-blue-70); } .pair-blue-80 { --bgl-pair-tone: var(--bgl-blue-80); } .pair-blue-90 { --bgl-pair-tone: var(--bgl-blue-90); } .pair-blue-100 { --bgl-pair-tone: var(--bgl-blue-100); }
+.pair-blue-110 { --bgl-pair-tone: var(--bgl-blue-110); } .pair-blue-120 { --bgl-pair-tone: var(--bgl-blue-120); } .pair-blue-130 { --bgl-pair-tone: var(--bgl-blue-130); }
 
 .pair-green, .pair-success,
-.pair-green-light,
-.pair-green-10, .pair-green-20, .pair-green-30, .pair-green-40, .pair-green-50,
-.pair-green-60, .pair-green-70, .pair-green-80, .pair-green-90, .pair-green-100,
-.pair-green-110, .pair-green-120, .pair-green-130 { --bgl-pair-tone: var(--bgl-green); }
+.pair-green-light { --bgl-pair-tone: var(--bgl-green); }
+.pair-green-10 { --bgl-pair-tone: var(--bgl-green-10); } .pair-green-20 { --bgl-pair-tone: var(--bgl-green-20); } .pair-green-30 { --bgl-pair-tone: var(--bgl-green-30); } .pair-green-40 { --bgl-pair-tone: var(--bgl-green-40); } .pair-green-50 { --bgl-pair-tone: var(--bgl-green-50); }
+.pair-green-60 { --bgl-pair-tone: var(--bgl-green-60); } .pair-green-70 { --bgl-pair-tone: var(--bgl-green-70); } .pair-green-80 { --bgl-pair-tone: var(--bgl-green-80); } .pair-green-90 { --bgl-pair-tone: var(--bgl-green-90); } .pair-green-100 { --bgl-pair-tone: var(--bgl-green-100); }
+.pair-green-110 { --bgl-pair-tone: var(--bgl-green-110); } .pair-green-120 { --bgl-pair-tone: var(--bgl-green-120); } .pair-green-130 { --bgl-pair-tone: var(--bgl-green-130); }
 
 .pair-red, .pair-danger,
-.pair-red-light, .pair-red-tint,
-.pair-red-10, .pair-red-20, .pair-red-30, .pair-red-40, .pair-red-50,
-.pair-red-60, .pair-red-70, .pair-red-80, .pair-red-90, .pair-red-100,
-.pair-red-110, .pair-red-120, .pair-red-130 { --bgl-pair-tone: var(--bgl-red); }
+.pair-red-light, .pair-red-tint { --bgl-pair-tone: var(--bgl-red); }
+.pair-red-10 { --bgl-pair-tone: var(--bgl-red-10); } .pair-red-20 { --bgl-pair-tone: var(--bgl-red-20); } .pair-red-30 { --bgl-pair-tone: var(--bgl-red-30); } .pair-red-40 { --bgl-pair-tone: var(--bgl-red-40); } .pair-red-50 { --bgl-pair-tone: var(--bgl-red-50); }
+.pair-red-60 { --bgl-pair-tone: var(--bgl-red-60); } .pair-red-70 { --bgl-pair-tone: var(--bgl-red-70); } .pair-red-80 { --bgl-pair-tone: var(--bgl-red-80); } .pair-red-90 { --bgl-pair-tone: var(--bgl-red-90); } .pair-red-100 { --bgl-pair-tone: var(--bgl-red-100); }
+.pair-red-110 { --bgl-pair-tone: var(--bgl-red-110); } .pair-red-120 { --bgl-pair-tone: var(--bgl-red-120); } .pair-red-130 { --bgl-pair-tone: var(--bgl-red-130); }
 
 .pair-yellow, .pair-warning,
-.pair-yellow-light,
-.pair-yellow-10, .pair-yellow-20, .pair-yellow-30, .pair-yellow-40, .pair-yellow-50,
-.pair-yellow-60, .pair-yellow-70, .pair-yellow-80, .pair-yellow-90, .pair-yellow-100,
-.pair-yellow-110, .pair-yellow-120, .pair-yellow-130 { --bgl-pair-tone: var(--bgl-yellow); }
+.pair-yellow-light { --bgl-pair-tone: var(--bgl-yellow); }
+.pair-yellow-10 { --bgl-pair-tone: var(--bgl-yellow-10); } .pair-yellow-20 { --bgl-pair-tone: var(--bgl-yellow-20); } .pair-yellow-30 { --bgl-pair-tone: var(--bgl-yellow-30); } .pair-yellow-40 { --bgl-pair-tone: var(--bgl-yellow-40); } .pair-yellow-50 { --bgl-pair-tone: var(--bgl-yellow-50); }
+.pair-yellow-60 { --bgl-pair-tone: var(--bgl-yellow-60); } .pair-yellow-70 { --bgl-pair-tone: var(--bgl-yellow-70); } .pair-yellow-80 { --bgl-pair-tone: var(--bgl-yellow-80); } .pair-yellow-90 { --bgl-pair-tone: var(--bgl-yellow-90); } .pair-yellow-100 { --bgl-pair-tone: var(--bgl-yellow-100); }
+.pair-yellow-110 { --bgl-pair-tone: var(--bgl-yellow-110); } .pair-yellow-120 { --bgl-pair-tone: var(--bgl-yellow-120); } .pair-yellow-130 { --bgl-pair-tone: var(--bgl-yellow-130); }
 
 .pair-purple,
-.pair-purple-light,
-.pair-purple-10, .pair-purple-20, .pair-purple-30, .pair-purple-40, .pair-purple-50,
-.pair-purple-60, .pair-purple-70, .pair-purple-80, .pair-purple-90, .pair-purple-100,
-.pair-purple-110, .pair-purple-120, .pair-purple-130 { --bgl-pair-tone: var(--bgl-purple); }
+.pair-purple-light { --bgl-pair-tone: var(--bgl-purple); }
+.pair-purple-10 { --bgl-pair-tone: var(--bgl-purple-10); } .pair-purple-20 { --bgl-pair-tone: var(--bgl-purple-20); } .pair-purple-30 { --bgl-pair-tone: var(--bgl-purple-30); } .pair-purple-40 { --bgl-pair-tone: var(--bgl-purple-40); } .pair-purple-50 { --bgl-pair-tone: var(--bgl-purple-50); }
+.pair-purple-60 { --bgl-pair-tone: var(--bgl-purple-60); } .pair-purple-70 { --bgl-pair-tone: var(--bgl-purple-70); } .pair-purple-80 { --bgl-pair-tone: var(--bgl-purple-80); } .pair-purple-90 { --bgl-pair-tone: var(--bgl-purple-90); } .pair-purple-100 { --bgl-pair-tone: var(--bgl-purple-100); }
+.pair-purple-110 { --bgl-pair-tone: var(--bgl-purple-110); } .pair-purple-120 { --bgl-pair-tone: var(--bgl-purple-120); } .pair-purple-130 { --bgl-pair-tone: var(--bgl-purple-130); }
 
 .pair-brown,
-.pair-brown-light,
-.pair-brown-10, .pair-brown-20, .pair-brown-30, .pair-brown-40, .pair-brown-50,
-.pair-brown-60, .pair-brown-70, .pair-brown-80, .pair-brown-90, .pair-brown-100,
-.pair-brown-110, .pair-brown-120, .pair-brown-130 { --bgl-pair-tone: var(--bgl-brown); }
+.pair-brown-light { --bgl-pair-tone: var(--bgl-brown); }
+.pair-brown-10 { --bgl-pair-tone: var(--bgl-brown-10); } .pair-brown-20 { --bgl-pair-tone: var(--bgl-brown-20); } .pair-brown-30 { --bgl-pair-tone: var(--bgl-brown-30); } .pair-brown-40 { --bgl-pair-tone: var(--bgl-brown-40); } .pair-brown-50 { --bgl-pair-tone: var(--bgl-brown-50); }
+.pair-brown-60 { --bgl-pair-tone: var(--bgl-brown-60); } .pair-brown-70 { --bgl-pair-tone: var(--bgl-brown-70); } .pair-brown-80 { --bgl-pair-tone: var(--bgl-brown-80); } .pair-brown-90 { --bgl-pair-tone: var(--bgl-brown-90); } .pair-brown-100 { --bgl-pair-tone: var(--bgl-brown-100); }
+.pair-brown-110 { --bgl-pair-tone: var(--bgl-brown-110); } .pair-brown-120 { --bgl-pair-tone: var(--bgl-brown-120); } .pair-brown-130 { --bgl-pair-tone: var(--bgl-brown-130); }
 
 .pair-orange,
-.pair-orange-light,
-.pair-orange-10, .pair-orange-20, .pair-orange-30, .pair-orange-40, .pair-orange-50,
-.pair-orange-60, .pair-orange-70, .pair-orange-80, .pair-orange-90, .pair-orange-100,
-.pair-orange-110, .pair-orange-120, .pair-orange-130 { --bgl-pair-tone: var(--bgl-orange); }
+.pair-orange-light { --bgl-pair-tone: var(--bgl-orange); }
+.pair-orange-10 { --bgl-pair-tone: var(--bgl-orange-10); } .pair-orange-20 { --bgl-pair-tone: var(--bgl-orange-20); } .pair-orange-30 { --bgl-pair-tone: var(--bgl-orange-30); } .pair-orange-40 { --bgl-pair-tone: var(--bgl-orange-40); } .pair-orange-50 { --bgl-pair-tone: var(--bgl-orange-50); }
+.pair-orange-60 { --bgl-pair-tone: var(--bgl-orange-60); } .pair-orange-70 { --bgl-pair-tone: var(--bgl-orange-70); } .pair-orange-80 { --bgl-pair-tone: var(--bgl-orange-80); } .pair-orange-90 { --bgl-pair-tone: var(--bgl-orange-90); } .pair-orange-100 { --bgl-pair-tone: var(--bgl-orange-100); }
+.pair-orange-110 { --bgl-pair-tone: var(--bgl-orange-110); } .pair-orange-120 { --bgl-pair-tone: var(--bgl-orange-120); } .pair-orange-130 { --bgl-pair-tone: var(--bgl-orange-130); }
 
 .pair-turquoise,
-.pair-turquoise-light,
-.pair-turquoise-10, .pair-turquoise-20, .pair-turquoise-30, .pair-turquoise-40, .pair-turquoise-50,
-.pair-turquoise-60, .pair-turquoise-70, .pair-turquoise-80, .pair-turquoise-90, .pair-turquoise-100,
-.pair-turquoise-110, .pair-turquoise-120, .pair-turquoise-130 { --bgl-pair-tone: var(--bgl-turquoise); }
+.pair-turquoise-light { --bgl-pair-tone: var(--bgl-turquoise); }
+.pair-turquoise-10 { --bgl-pair-tone: var(--bgl-turquoise-10); } .pair-turquoise-20 { --bgl-pair-tone: var(--bgl-turquoise-20); } .pair-turquoise-30 { --bgl-pair-tone: var(--bgl-turquoise-30); } .pair-turquoise-40 { --bgl-pair-tone: var(--bgl-turquoise-40); } .pair-turquoise-50 { --bgl-pair-tone: var(--bgl-turquoise-50); }
+.pair-turquoise-60 { --bgl-pair-tone: var(--bgl-turquoise-60); } .pair-turquoise-70 { --bgl-pair-tone: var(--bgl-turquoise-70); } .pair-turquoise-80 { --bgl-pair-tone: var(--bgl-turquoise-80); } .pair-turquoise-90 { --bgl-pair-tone: var(--bgl-turquoise-90); } .pair-turquoise-100 { --bgl-pair-tone: var(--bgl-turquoise-100); }
+.pair-turquoise-110 { --bgl-pair-tone: var(--bgl-turquoise-110); } .pair-turquoise-120 { --bgl-pair-tone: var(--bgl-turquoise-120); } .pair-turquoise-130 { --bgl-pair-tone: var(--bgl-turquoise-130); }
 
 .pair-pink,
-.pair-pink-light,
-.pair-pink-10, .pair-pink-20, .pair-pink-30, .pair-pink-40, .pair-pink-50,
-.pair-pink-60, .pair-pink-70, .pair-pink-80, .pair-pink-90, .pair-pink-100,
-.pair-pink-110, .pair-pink-120, .pair-pink-130 { --bgl-pair-tone: var(--bgl-pink); }
+.pair-pink-light { --bgl-pair-tone: var(--bgl-pink); }
+.pair-pink-10 { --bgl-pair-tone: var(--bgl-pink-10); } .pair-pink-20 { --bgl-pair-tone: var(--bgl-pink-20); } .pair-pink-30 { --bgl-pair-tone: var(--bgl-pink-30); } .pair-pink-40 { --bgl-pair-tone: var(--bgl-pink-40); } .pair-pink-50 { --bgl-pair-tone: var(--bgl-pink-50); }
+.pair-pink-60 { --bgl-pair-tone: var(--bgl-pink-60); } .pair-pink-70 { --bgl-pair-tone: var(--bgl-pink-70); } .pair-pink-80 { --bgl-pair-tone: var(--bgl-pink-80); } .pair-pink-90 { --bgl-pair-tone: var(--bgl-pink-90); } .pair-pink-100 { --bgl-pair-tone: var(--bgl-pink-100); }
+.pair-pink-110 { --bgl-pair-tone: var(--bgl-pink-110); } .pair-pink-120 { --bgl-pair-tone: var(--bgl-pink-120); } .pair-pink-130 { --bgl-pair-tone: var(--bgl-pink-130); }
 
 .pair-gray,
-.pair-gray-light, .pair-gray-tint,
-.pair-gray-10, .pair-gray-20, .pair-gray-30, .pair-gray-40, .pair-gray-50,
-.pair-gray-60, .pair-gray-70, .pair-gray-80, .pair-gray-90, .pair-gray-100,
-.pair-gray-110, .pair-gray-120, .pair-gray-130 { --bgl-pair-tone: var(--bgl-gray); }
+.pair-gray-light, .pair-gray-tint { --bgl-pair-tone: var(--bgl-gray); }
+.pair-gray-10 { --bgl-pair-tone: var(--bgl-gray-10); } .pair-gray-20 { --bgl-pair-tone: var(--bgl-gray-20); } .pair-gray-30 { --bgl-pair-tone: var(--bgl-gray-30); } .pair-gray-40 { --bgl-pair-tone: var(--bgl-gray-40); } .pair-gray-50 { --bgl-pair-tone: var(--bgl-gray-50); }
+.pair-gray-60 { --bgl-pair-tone: var(--bgl-gray-60); } .pair-gray-70 { --bgl-pair-tone: var(--bgl-gray-70); } .pair-gray-80 { --bgl-pair-tone: var(--bgl-gray-80); } .pair-gray-90 { --bgl-pair-tone: var(--bgl-gray-90); } .pair-gray-100 { --bgl-pair-tone: var(--bgl-gray-100); }
+.pair-gray-110 { --bgl-pair-tone: var(--bgl-gray-110); } .pair-gray-120 { --bgl-pair-tone: var(--bgl-gray-120); } .pair-gray-130 { --bgl-pair-tone: var(--bgl-gray-130); }
 
 .pair-black,
-.pair-black-tint,
-.pair-black-10, .pair-black-20, .pair-black-30, .pair-black-40, .pair-black-50,
-.pair-black-60, .pair-black-70, .pair-black-80, .pair-black-90, .pair-black-100,
-.pair-black-110, .pair-black-120, .pair-black-130 { --bgl-pair-tone: var(--bgl-black); }
+.pair-black-tint { --bgl-pair-tone: var(--bgl-black); }
+.pair-black-10 { --bgl-pair-tone: var(--bgl-black-10); } .pair-black-20 { --bgl-pair-tone: var(--bgl-black-20); } .pair-black-30 { --bgl-pair-tone: var(--bgl-black-30); } .pair-black-40 { --bgl-pair-tone: var(--bgl-black-40); } .pair-black-50 { --bgl-pair-tone: var(--bgl-black-50); }
+.pair-black-60 { --bgl-pair-tone: var(--bgl-black-60); } .pair-black-70 { --bgl-pair-tone: var(--bgl-black-70); } .pair-black-80 { --bgl-pair-tone: var(--bgl-black-80); } .pair-black-90 { --bgl-pair-tone: var(--bgl-black-90); } .pair-black-100 { --bgl-pair-tone: var(--bgl-black-100); }
+.pair-black-110 { --bgl-pair-tone: var(--bgl-black-110); } .pair-black-120 { --bgl-pair-tone: var(--bgl-black-120); } .pair-black-130 { --bgl-pair-tone: var(--bgl-black-130); }
 
 .pair-white { --bgl-pair-tone: var(--bgl-white); }
 
@@ -156,3 +162,22 @@
 	color: var(--bgl-white) !important;
 	border: none !important;
 }
+
+/* New role colors — tone map */
+.pair-secondary,
+.pair-secondary-light, .pair-secondary-tint { --bgl-pair-tone: var(--bgl-secondary); }
+.pair-secondary-10 { --bgl-pair-tone: var(--bgl-secondary-10); } .pair-secondary-20 { --bgl-pair-tone: var(--bgl-secondary-20); } .pair-secondary-30 { --bgl-pair-tone: var(--bgl-secondary-30); } .pair-secondary-40 { --bgl-pair-tone: var(--bgl-secondary-40); } .pair-secondary-50 { --bgl-pair-tone: var(--bgl-secondary-50); }
+.pair-secondary-60 { --bgl-pair-tone: var(--bgl-secondary-60); } .pair-secondary-70 { --bgl-pair-tone: var(--bgl-secondary-70); } .pair-secondary-80 { --bgl-pair-tone: var(--bgl-secondary-80); } .pair-secondary-90 { --bgl-pair-tone: var(--bgl-secondary-90); } .pair-secondary-100 { --bgl-pair-tone: var(--bgl-secondary-100); }
+.pair-secondary-110 { --bgl-pair-tone: var(--bgl-secondary-110); } .pair-secondary-120 { --bgl-pair-tone: var(--bgl-secondary-120); } .pair-secondary-130 { --bgl-pair-tone: var(--bgl-secondary-130); }
+
+.pair-tertiary,
+.pair-tertiary-light, .pair-tertiary-tint { --bgl-pair-tone: var(--bgl-tertiary); }
+.pair-tertiary-10 { --bgl-pair-tone: var(--bgl-tertiary-10); } .pair-tertiary-20 { --bgl-pair-tone: var(--bgl-tertiary-20); } .pair-tertiary-30 { --bgl-pair-tone: var(--bgl-tertiary-30); } .pair-tertiary-40 { --bgl-pair-tone: var(--bgl-tertiary-40); } .pair-tertiary-50 { --bgl-pair-tone: var(--bgl-tertiary-50); }
+.pair-tertiary-60 { --bgl-pair-tone: var(--bgl-tertiary-60); } .pair-tertiary-70 { --bgl-pair-tone: var(--bgl-tertiary-70); } .pair-tertiary-80 { --bgl-pair-tone: var(--bgl-tertiary-80); } .pair-tertiary-90 { --bgl-pair-tone: var(--bgl-tertiary-90); } .pair-tertiary-100 { --bgl-pair-tone: var(--bgl-tertiary-100); }
+.pair-tertiary-110 { --bgl-pair-tone: var(--bgl-tertiary-110); } .pair-tertiary-120 { --bgl-pair-tone: var(--bgl-tertiary-120); } .pair-tertiary-130 { --bgl-pair-tone: var(--bgl-tertiary-130); }
+
+.pair-quaternary,
+.pair-quaternary-light, .pair-quaternary-tint { --bgl-pair-tone: var(--bgl-quaternary); }
+.pair-quaternary-10 { --bgl-pair-tone: var(--bgl-quaternary-10); } .pair-quaternary-20 { --bgl-pair-tone: var(--bgl-quaternary-20); } .pair-quaternary-30 { --bgl-pair-tone: var(--bgl-quaternary-30); } .pair-quaternary-40 { --bgl-pair-tone: var(--bgl-quaternary-40); } .pair-quaternary-50 { --bgl-pair-tone: var(--bgl-quaternary-50); }
+.pair-quaternary-60 { --bgl-pair-tone: var(--bgl-quaternary-60); } .pair-quaternary-70 { --bgl-pair-tone: var(--bgl-quaternary-70); } .pair-quaternary-80 { --bgl-pair-tone: var(--bgl-quaternary-80); } .pair-quaternary-90 { --bgl-pair-tone: var(--bgl-quaternary-90); } .pair-quaternary-100 { --bgl-pair-tone: var(--bgl-quaternary-100); }
+.pair-quaternary-110 { --bgl-pair-tone: var(--bgl-quaternary-110); } .pair-quaternary-120 { --bgl-pair-tone: var(--bgl-quaternary-120); } .pair-quaternary-130 { --bgl-pair-tone: var(--bgl-quaternary-130); }