@bagelink/vue 1.15.86 → 1.15.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/Card.vue.d.ts.map +1 -1
  2. package/dist/components/ListItem.vue.d.ts.map +1 -1
  3. package/dist/index.cjs +138 -165
  4. package/dist/index.mjs +34939 -28880
  5. package/dist/style.css +2 -1
  6. package/package.json +1 -1
  7. package/src/components/Card.vue +2 -0
  8. package/src/components/ListItem.vue +5 -4
  9. package/src/styles/color-variants.css +68 -56
  10. package/src/styles/colors.css +23 -0
  11. package/src/styles/gradients.css +49 -0
  12. package/src/styles/layout.css +264 -26
  13. package/src/styles/mobilLayout.css +133 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "1.15.86",
4
+ "version": "1.15.90",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Bagel Studio",
package/src/components/Card.vue CHANGED
@@ -129,6 +129,8 @@ padding: var(--bgl-card-pad);
129
129
  /* When padding is stripped via the p-0 utility, the header supplies its own. */
130
130
  .bgl_card.p-0 { --bgl-card-pad: 0rem; }
131
131
  .bgl_card.p-0 .card_header { padding-inline: 1rem; padding-block: 0.75rem; margin-bottom: 0; }
132
+ /* Likewise the label hangs off the card edge on a p-0 card, so give it its own. */
133
+ .bgl_card.p-0 .card_label { padding-inline: 1rem; padding-top: 0.75rem; }
132
134
 
133
135
  .bgl_card.BagelTable {
134
136
  height: 100%;
package/src/components/ListItem.vue CHANGED
@@ -99,7 +99,7 @@ const bind = computed(() => {
99
99
  <template>
100
100
  <div
101
101
  v-bind="rootAttrs"
102
- class="flex space-between list-item-row"
102
+ class="flex space-between list-item-row bg"
103
103
  :class="{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active }"
104
104
  :style="color ? { '--bgl-list-item-accent': `var(--bgl-${color})` } : undefined"
105
105
  >
@@ -177,13 +177,14 @@ gap: 0.5rem;
177
177
  --bgl-list-item-end-inset: 1rem;
178
178
  }
179
179
  .list-item-fullrow .list-item-end {
180
- position: absolute;
180
+ /* position: absolute; */
181
181
  inset-inline-end: var(--bgl-list-item-end-inset);
182
- top: 50%;
183
- transform: translateY(-50%);
182
+ /* top: 50%; */
183
+ /* transform: translateY(-50%); */
184
184
  z-index: 1;
185
185
  /* non-interactive meta lets clicks fall through to the row button… */
186
186
  pointer-events: none;
187
+ padding-inline-end: 1rem;
187
188
  }
188
189
  /* …interactive trailing controls stay clickable on top of the row button. */
189
190
  .list-item-fullrow .list-item-end :where(button, a, input, select, label, [role="button"], [tabindex]) {
package/src/styles/color-variants.css CHANGED
@@ -14,79 +14,85 @@
14
14
  * color-mix(). One rule covers all 13 tones × all 13 shades.
15
15
  * ──────────────────────────────────────────────────────────────────────────── */
16
16
 
17
- /* 1) Map every pair tone (base + 10..130 + light/tint/dark + semantic) to a
18
- * single --bgl-pair-tone custom property. */
17
+ /* 1) Map every pair tone to a --bgl-pair-tone custom property that soft / frost /
18
+ * gradient read from.
19
+ *
20
+ * Base + light/tint/dark/semantic aliases map to the BASE token. Each numeric
21
+ * shade (10..130) maps to ITS OWN shade token, so `pair-<tone>-<shade>` +
22
+ * soft/frost/gradient honour the shade instead of collapsing back to the base
23
+ * tone. (e.g. `<Card color="black-110" gradient>` now sweeps the -110 navy,
24
+ * not plain --bgl-black.) */
19
25
  .pair-primary, .pair-default,
20
- .pair-primary-light, .pair-primary-tint,
21
- .pair-primary-10, .pair-primary-20, .pair-primary-30, .pair-primary-40, .pair-primary-50,
22
- .pair-primary-60, .pair-primary-70, .pair-primary-80, .pair-primary-90, .pair-primary-100,
23
- .pair-primary-110, .pair-primary-120, .pair-primary-130 { --bgl-pair-tone: var(--bgl-primary); }
26
+ .pair-primary-light, .pair-primary-tint { --bgl-pair-tone: var(--bgl-primary); }
27
+ .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); }
28
+ .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); }
29
+ .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); }
24
30
 
25
31
  .pair-blue, .pair-info,
26
- .pair-blue-light, .pair-blue-tint, .pair-blue-dark,
27
- .pair-blue-10, .pair-blue-20, .pair-blue-30, .pair-blue-40, .pair-blue-50,
28
- .pair-blue-60, .pair-blue-70, .pair-blue-80, .pair-blue-90, .pair-blue-100,
29
- .pair-blue-110, .pair-blue-120, .pair-blue-130 { --bgl-pair-tone: var(--bgl-blue); }
32
+ .pair-blue-light, .pair-blue-tint, .pair-blue-dark { --bgl-pair-tone: var(--bgl-blue); }
33
+ .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); }
34
+ .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); }
35
+ .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); }
30
36
 
31
37
  .pair-green, .pair-success,
32
- .pair-green-light,
33
- .pair-green-10, .pair-green-20, .pair-green-30, .pair-green-40, .pair-green-50,
34
- .pair-green-60, .pair-green-70, .pair-green-80, .pair-green-90, .pair-green-100,
35
- .pair-green-110, .pair-green-120, .pair-green-130 { --bgl-pair-tone: var(--bgl-green); }
38
+ .pair-green-light { --bgl-pair-tone: var(--bgl-green); }
39
+ .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); }
40
+ .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); }
41
+ .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); }
36
42
 
37
43
  .pair-red, .pair-danger,
38
- .pair-red-light, .pair-red-tint,
39
- .pair-red-10, .pair-red-20, .pair-red-30, .pair-red-40, .pair-red-50,
40
- .pair-red-60, .pair-red-70, .pair-red-80, .pair-red-90, .pair-red-100,
41
- .pair-red-110, .pair-red-120, .pair-red-130 { --bgl-pair-tone: var(--bgl-red); }
44
+ .pair-red-light, .pair-red-tint { --bgl-pair-tone: var(--bgl-red); }
45
+ .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); }
46
+ .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); }
47
+ .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); }
42
48
 
43
49
  .pair-yellow, .pair-warning,
44
- .pair-yellow-light,
45
- .pair-yellow-10, .pair-yellow-20, .pair-yellow-30, .pair-yellow-40, .pair-yellow-50,
46
- .pair-yellow-60, .pair-yellow-70, .pair-yellow-80, .pair-yellow-90, .pair-yellow-100,
47
- .pair-yellow-110, .pair-yellow-120, .pair-yellow-130 { --bgl-pair-tone: var(--bgl-yellow); }
50
+ .pair-yellow-light { --bgl-pair-tone: var(--bgl-yellow); }
51
+ .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); }
52
+ .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); }
53
+ .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); }
48
54
 
49
55
  .pair-purple,
50
- .pair-purple-light,
51
- .pair-purple-10, .pair-purple-20, .pair-purple-30, .pair-purple-40, .pair-purple-50,
52
- .pair-purple-60, .pair-purple-70, .pair-purple-80, .pair-purple-90, .pair-purple-100,
53
- .pair-purple-110, .pair-purple-120, .pair-purple-130 { --bgl-pair-tone: var(--bgl-purple); }
56
+ .pair-purple-light { --bgl-pair-tone: var(--bgl-purple); }
57
+ .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); }
58
+ .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); }
59
+ .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); }
54
60
 
55
61
  .pair-brown,
56
- .pair-brown-light,
57
- .pair-brown-10, .pair-brown-20, .pair-brown-30, .pair-brown-40, .pair-brown-50,
58
- .pair-brown-60, .pair-brown-70, .pair-brown-80, .pair-brown-90, .pair-brown-100,
59
- .pair-brown-110, .pair-brown-120, .pair-brown-130 { --bgl-pair-tone: var(--bgl-brown); }
62
+ .pair-brown-light { --bgl-pair-tone: var(--bgl-brown); }
63
+ .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); }
64
+ .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); }
65
+ .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); }
60
66
 
61
67
  .pair-orange,
62
- .pair-orange-light,
63
- .pair-orange-10, .pair-orange-20, .pair-orange-30, .pair-orange-40, .pair-orange-50,
64
- .pair-orange-60, .pair-orange-70, .pair-orange-80, .pair-orange-90, .pair-orange-100,
65
- .pair-orange-110, .pair-orange-120, .pair-orange-130 { --bgl-pair-tone: var(--bgl-orange); }
68
+ .pair-orange-light { --bgl-pair-tone: var(--bgl-orange); }
69
+ .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); }
70
+ .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); }
71
+ .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); }
66
72
 
67
73
  .pair-turquoise,
68
- .pair-turquoise-light,
69
- .pair-turquoise-10, .pair-turquoise-20, .pair-turquoise-30, .pair-turquoise-40, .pair-turquoise-50,
70
- .pair-turquoise-60, .pair-turquoise-70, .pair-turquoise-80, .pair-turquoise-90, .pair-turquoise-100,
71
- .pair-turquoise-110, .pair-turquoise-120, .pair-turquoise-130 { --bgl-pair-tone: var(--bgl-turquoise); }
74
+ .pair-turquoise-light { --bgl-pair-tone: var(--bgl-turquoise); }
75
+ .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); }
76
+ .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); }
77
+ .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); }
72
78
 
73
79
  .pair-pink,
74
- .pair-pink-light,
75
- .pair-pink-10, .pair-pink-20, .pair-pink-30, .pair-pink-40, .pair-pink-50,
76
- .pair-pink-60, .pair-pink-70, .pair-pink-80, .pair-pink-90, .pair-pink-100,
77
- .pair-pink-110, .pair-pink-120, .pair-pink-130 { --bgl-pair-tone: var(--bgl-pink); }
80
+ .pair-pink-light { --bgl-pair-tone: var(--bgl-pink); }
81
+ .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); }
82
+ .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); }
83
+ .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); }
78
84
 
79
85
  .pair-gray,
80
- .pair-gray-light, .pair-gray-tint,
81
- .pair-gray-10, .pair-gray-20, .pair-gray-30, .pair-gray-40, .pair-gray-50,
82
- .pair-gray-60, .pair-gray-70, .pair-gray-80, .pair-gray-90, .pair-gray-100,
83
- .pair-gray-110, .pair-gray-120, .pair-gray-130 { --bgl-pair-tone: var(--bgl-gray); }
86
+ .pair-gray-light, .pair-gray-tint { --bgl-pair-tone: var(--bgl-gray); }
87
+ .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); }
88
+ .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); }
89
+ .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); }
84
90
 
85
91
  .pair-black,
86
- .pair-black-tint,
87
- .pair-black-10, .pair-black-20, .pair-black-30, .pair-black-40, .pair-black-50,
88
- .pair-black-60, .pair-black-70, .pair-black-80, .pair-black-90, .pair-black-100,
89
- .pair-black-110, .pair-black-120, .pair-black-130 { --bgl-pair-tone: var(--bgl-black); }
92
+ .pair-black-tint { --bgl-pair-tone: var(--bgl-black); }
93
+ .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); }
94
+ .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); }
95
+ .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); }
90
96
 
91
97
  .pair-white { --bgl-pair-tone: var(--bgl-white); }
92
98
 
@@ -159,13 +165,19 @@
159
165
 
160
166
  /* New role colors — tone map */
161
167
  .pair-secondary,
162
- .pair-secondary-light, .pair-secondary-tint,
163
- .pair-secondary-10, .pair-secondary-20, .pair-secondary-30, .pair-secondary-40, .pair-secondary-50, .pair-secondary-60, .pair-secondary-70, .pair-secondary-80, .pair-secondary-90, .pair-secondary-100, .pair-secondary-110, .pair-secondary-120, .pair-secondary-130 { --bgl-pair-tone: var(--bgl-secondary); }
168
+ .pair-secondary-light, .pair-secondary-tint { --bgl-pair-tone: var(--bgl-secondary); }
169
+ .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); }
170
+ .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); }
171
+ .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); }
164
172
 
165
173
  .pair-tertiary,
166
- .pair-tertiary-light, .pair-tertiary-tint,
167
- .pair-tertiary-10, .pair-tertiary-20, .pair-tertiary-30, .pair-tertiary-40, .pair-tertiary-50, .pair-tertiary-60, .pair-tertiary-70, .pair-tertiary-80, .pair-tertiary-90, .pair-tertiary-100, .pair-tertiary-110, .pair-tertiary-120, .pair-tertiary-130 { --bgl-pair-tone: var(--bgl-tertiary); }
174
+ .pair-tertiary-light, .pair-tertiary-tint { --bgl-pair-tone: var(--bgl-tertiary); }
175
+ .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); }
176
+ .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); }
177
+ .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); }
168
178
 
169
179
  .pair-quaternary,
170
- .pair-quaternary-light, .pair-quaternary-tint,
171
- .pair-quaternary-10, .pair-quaternary-20, .pair-quaternary-30, .pair-quaternary-40, .pair-quaternary-50, .pair-quaternary-60, .pair-quaternary-70, .pair-quaternary-80, .pair-quaternary-90, .pair-quaternary-100, .pair-quaternary-110, .pair-quaternary-120, .pair-quaternary-130 { --bgl-pair-tone: var(--bgl-quaternary); }
180
+ .pair-quaternary-light, .pair-quaternary-tint { --bgl-pair-tone: var(--bgl-quaternary); }
181
+ .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); }
182
+ .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); }
183
+ .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); }
package/src/styles/colors.css CHANGED
@@ -742,6 +742,29 @@
742
742
  color: var(--bgl-bg) !important;
743
743
  }
744
744
 
745
+ .bg-box {
746
+ background: var(--bgl-box-bg) !important;
747
+ --alpha-color: var(--bgl-box-bg);
748
+ }
749
+
750
+ .color-box {
751
+ color: var(--bgl-box-bg) !important;
752
+ }
753
+
754
+ .bg-input-box input,
755
+ .bg-input-box textarea,
756
+ .bg-input-box .selectinput-btn {
757
+ background: var(--bgl-box-bg) !important;
758
+ }
759
+
760
+ .border-box {
761
+ border-color: var(--bgl-box-bg) !important;
762
+ }
763
+
764
+ .color-input-box input {
765
+ color: var(--bgl-box-bg) !important;
766
+ }
767
+
745
768
  .bg-popup {
746
769
  background: var(--bgl-popup-bg) !important;
747
770
  --alpha-color: var(--bgl-popup-bg);
package/src/styles/gradients.css CHANGED
@@ -127,6 +127,55 @@
127
127
  .from-blue-tint { --bgl-grad-from: var(--bgl-blue-tint); }
128
128
  .to-blue-tint { --bgl-grad-to: var(--bgl-blue-tint); }
129
129
 
130
+ /* Numeric shade stops (10..130) — compose with from-/via-/to- like base tones.
131
+ Lets a plain-element gradient sweep shade-to-shade, e.g.
132
+ `bg-gradient from-black-110 to-black-130`. */
133
+ .from-primary-10 { --bgl-grad-from: var(--bgl-primary-10); } .from-primary-20 { --bgl-grad-from: var(--bgl-primary-20); } .from-primary-30 { --bgl-grad-from: var(--bgl-primary-30); } .from-primary-40 { --bgl-grad-from: var(--bgl-primary-40); } .from-primary-50 { --bgl-grad-from: var(--bgl-primary-50); } .from-primary-60 { --bgl-grad-from: var(--bgl-primary-60); } .from-primary-70 { --bgl-grad-from: var(--bgl-primary-70); } .from-primary-80 { --bgl-grad-from: var(--bgl-primary-80); } .from-primary-90 { --bgl-grad-from: var(--bgl-primary-90); } .from-primary-100 { --bgl-grad-from: var(--bgl-primary-100); } .from-primary-110 { --bgl-grad-from: var(--bgl-primary-110); } .from-primary-120 { --bgl-grad-from: var(--bgl-primary-120); } .from-primary-130 { --bgl-grad-from: var(--bgl-primary-130); }
134
+ .to-primary-10 { --bgl-grad-to: var(--bgl-primary-10); } .to-primary-20 { --bgl-grad-to: var(--bgl-primary-20); } .to-primary-30 { --bgl-grad-to: var(--bgl-primary-30); } .to-primary-40 { --bgl-grad-to: var(--bgl-primary-40); } .to-primary-50 { --bgl-grad-to: var(--bgl-primary-50); } .to-primary-60 { --bgl-grad-to: var(--bgl-primary-60); } .to-primary-70 { --bgl-grad-to: var(--bgl-primary-70); } .to-primary-80 { --bgl-grad-to: var(--bgl-primary-80); } .to-primary-90 { --bgl-grad-to: var(--bgl-primary-90); } .to-primary-100 { --bgl-grad-to: var(--bgl-primary-100); } .to-primary-110 { --bgl-grad-to: var(--bgl-primary-110); } .to-primary-120 { --bgl-grad-to: var(--bgl-primary-120); } .to-primary-130 { --bgl-grad-to: var(--bgl-primary-130); }
135
+ .via-primary-10 { --bgl-grad-via: var(--bgl-primary-10), ; } .via-primary-20 { --bgl-grad-via: var(--bgl-primary-20), ; } .via-primary-30 { --bgl-grad-via: var(--bgl-primary-30), ; } .via-primary-40 { --bgl-grad-via: var(--bgl-primary-40), ; } .via-primary-50 { --bgl-grad-via: var(--bgl-primary-50), ; } .via-primary-60 { --bgl-grad-via: var(--bgl-primary-60), ; } .via-primary-70 { --bgl-grad-via: var(--bgl-primary-70), ; } .via-primary-80 { --bgl-grad-via: var(--bgl-primary-80), ; } .via-primary-90 { --bgl-grad-via: var(--bgl-primary-90), ; } .via-primary-100 { --bgl-grad-via: var(--bgl-primary-100), ; } .via-primary-110 { --bgl-grad-via: var(--bgl-primary-110), ; } .via-primary-120 { --bgl-grad-via: var(--bgl-primary-120), ; } .via-primary-130 { --bgl-grad-via: var(--bgl-primary-130), ; }
136
+ .from-blue-10 { --bgl-grad-from: var(--bgl-blue-10); } .from-blue-20 { --bgl-grad-from: var(--bgl-blue-20); } .from-blue-30 { --bgl-grad-from: var(--bgl-blue-30); } .from-blue-40 { --bgl-grad-from: var(--bgl-blue-40); } .from-blue-50 { --bgl-grad-from: var(--bgl-blue-50); } .from-blue-60 { --bgl-grad-from: var(--bgl-blue-60); } .from-blue-70 { --bgl-grad-from: var(--bgl-blue-70); } .from-blue-80 { --bgl-grad-from: var(--bgl-blue-80); } .from-blue-90 { --bgl-grad-from: var(--bgl-blue-90); } .from-blue-100 { --bgl-grad-from: var(--bgl-blue-100); } .from-blue-110 { --bgl-grad-from: var(--bgl-blue-110); } .from-blue-120 { --bgl-grad-from: var(--bgl-blue-120); } .from-blue-130 { --bgl-grad-from: var(--bgl-blue-130); }
137
+ .to-blue-10 { --bgl-grad-to: var(--bgl-blue-10); } .to-blue-20 { --bgl-grad-to: var(--bgl-blue-20); } .to-blue-30 { --bgl-grad-to: var(--bgl-blue-30); } .to-blue-40 { --bgl-grad-to: var(--bgl-blue-40); } .to-blue-50 { --bgl-grad-to: var(--bgl-blue-50); } .to-blue-60 { --bgl-grad-to: var(--bgl-blue-60); } .to-blue-70 { --bgl-grad-to: var(--bgl-blue-70); } .to-blue-80 { --bgl-grad-to: var(--bgl-blue-80); } .to-blue-90 { --bgl-grad-to: var(--bgl-blue-90); } .to-blue-100 { --bgl-grad-to: var(--bgl-blue-100); } .to-blue-110 { --bgl-grad-to: var(--bgl-blue-110); } .to-blue-120 { --bgl-grad-to: var(--bgl-blue-120); } .to-blue-130 { --bgl-grad-to: var(--bgl-blue-130); }
138
+ .via-blue-10 { --bgl-grad-via: var(--bgl-blue-10), ; } .via-blue-20 { --bgl-grad-via: var(--bgl-blue-20), ; } .via-blue-30 { --bgl-grad-via: var(--bgl-blue-30), ; } .via-blue-40 { --bgl-grad-via: var(--bgl-blue-40), ; } .via-blue-50 { --bgl-grad-via: var(--bgl-blue-50), ; } .via-blue-60 { --bgl-grad-via: var(--bgl-blue-60), ; } .via-blue-70 { --bgl-grad-via: var(--bgl-blue-70), ; } .via-blue-80 { --bgl-grad-via: var(--bgl-blue-80), ; } .via-blue-90 { --bgl-grad-via: var(--bgl-blue-90), ; } .via-blue-100 { --bgl-grad-via: var(--bgl-blue-100), ; } .via-blue-110 { --bgl-grad-via: var(--bgl-blue-110), ; } .via-blue-120 { --bgl-grad-via: var(--bgl-blue-120), ; } .via-blue-130 { --bgl-grad-via: var(--bgl-blue-130), ; }
139
+ .from-green-10 { --bgl-grad-from: var(--bgl-green-10); } .from-green-20 { --bgl-grad-from: var(--bgl-green-20); } .from-green-30 { --bgl-grad-from: var(--bgl-green-30); } .from-green-40 { --bgl-grad-from: var(--bgl-green-40); } .from-green-50 { --bgl-grad-from: var(--bgl-green-50); } .from-green-60 { --bgl-grad-from: var(--bgl-green-60); } .from-green-70 { --bgl-grad-from: var(--bgl-green-70); } .from-green-80 { --bgl-grad-from: var(--bgl-green-80); } .from-green-90 { --bgl-grad-from: var(--bgl-green-90); } .from-green-100 { --bgl-grad-from: var(--bgl-green-100); } .from-green-110 { --bgl-grad-from: var(--bgl-green-110); } .from-green-120 { --bgl-grad-from: var(--bgl-green-120); } .from-green-130 { --bgl-grad-from: var(--bgl-green-130); }
140
+ .to-green-10 { --bgl-grad-to: var(--bgl-green-10); } .to-green-20 { --bgl-grad-to: var(--bgl-green-20); } .to-green-30 { --bgl-grad-to: var(--bgl-green-30); } .to-green-40 { --bgl-grad-to: var(--bgl-green-40); } .to-green-50 { --bgl-grad-to: var(--bgl-green-50); } .to-green-60 { --bgl-grad-to: var(--bgl-green-60); } .to-green-70 { --bgl-grad-to: var(--bgl-green-70); } .to-green-80 { --bgl-grad-to: var(--bgl-green-80); } .to-green-90 { --bgl-grad-to: var(--bgl-green-90); } .to-green-100 { --bgl-grad-to: var(--bgl-green-100); } .to-green-110 { --bgl-grad-to: var(--bgl-green-110); } .to-green-120 { --bgl-grad-to: var(--bgl-green-120); } .to-green-130 { --bgl-grad-to: var(--bgl-green-130); }
141
+ .via-green-10 { --bgl-grad-via: var(--bgl-green-10), ; } .via-green-20 { --bgl-grad-via: var(--bgl-green-20), ; } .via-green-30 { --bgl-grad-via: var(--bgl-green-30), ; } .via-green-40 { --bgl-grad-via: var(--bgl-green-40), ; } .via-green-50 { --bgl-grad-via: var(--bgl-green-50), ; } .via-green-60 { --bgl-grad-via: var(--bgl-green-60), ; } .via-green-70 { --bgl-grad-via: var(--bgl-green-70), ; } .via-green-80 { --bgl-grad-via: var(--bgl-green-80), ; } .via-green-90 { --bgl-grad-via: var(--bgl-green-90), ; } .via-green-100 { --bgl-grad-via: var(--bgl-green-100), ; } .via-green-110 { --bgl-grad-via: var(--bgl-green-110), ; } .via-green-120 { --bgl-grad-via: var(--bgl-green-120), ; } .via-green-130 { --bgl-grad-via: var(--bgl-green-130), ; }
142
+ .from-red-10 { --bgl-grad-from: var(--bgl-red-10); } .from-red-20 { --bgl-grad-from: var(--bgl-red-20); } .from-red-30 { --bgl-grad-from: var(--bgl-red-30); } .from-red-40 { --bgl-grad-from: var(--bgl-red-40); } .from-red-50 { --bgl-grad-from: var(--bgl-red-50); } .from-red-60 { --bgl-grad-from: var(--bgl-red-60); } .from-red-70 { --bgl-grad-from: var(--bgl-red-70); } .from-red-80 { --bgl-grad-from: var(--bgl-red-80); } .from-red-90 { --bgl-grad-from: var(--bgl-red-90); } .from-red-100 { --bgl-grad-from: var(--bgl-red-100); } .from-red-110 { --bgl-grad-from: var(--bgl-red-110); } .from-red-120 { --bgl-grad-from: var(--bgl-red-120); } .from-red-130 { --bgl-grad-from: var(--bgl-red-130); }
143
+ .to-red-10 { --bgl-grad-to: var(--bgl-red-10); } .to-red-20 { --bgl-grad-to: var(--bgl-red-20); } .to-red-30 { --bgl-grad-to: var(--bgl-red-30); } .to-red-40 { --bgl-grad-to: var(--bgl-red-40); } .to-red-50 { --bgl-grad-to: var(--bgl-red-50); } .to-red-60 { --bgl-grad-to: var(--bgl-red-60); } .to-red-70 { --bgl-grad-to: var(--bgl-red-70); } .to-red-80 { --bgl-grad-to: var(--bgl-red-80); } .to-red-90 { --bgl-grad-to: var(--bgl-red-90); } .to-red-100 { --bgl-grad-to: var(--bgl-red-100); } .to-red-110 { --bgl-grad-to: var(--bgl-red-110); } .to-red-120 { --bgl-grad-to: var(--bgl-red-120); } .to-red-130 { --bgl-grad-to: var(--bgl-red-130); }
144
+ .via-red-10 { --bgl-grad-via: var(--bgl-red-10), ; } .via-red-20 { --bgl-grad-via: var(--bgl-red-20), ; } .via-red-30 { --bgl-grad-via: var(--bgl-red-30), ; } .via-red-40 { --bgl-grad-via: var(--bgl-red-40), ; } .via-red-50 { --bgl-grad-via: var(--bgl-red-50), ; } .via-red-60 { --bgl-grad-via: var(--bgl-red-60), ; } .via-red-70 { --bgl-grad-via: var(--bgl-red-70), ; } .via-red-80 { --bgl-grad-via: var(--bgl-red-80), ; } .via-red-90 { --bgl-grad-via: var(--bgl-red-90), ; } .via-red-100 { --bgl-grad-via: var(--bgl-red-100), ; } .via-red-110 { --bgl-grad-via: var(--bgl-red-110), ; } .via-red-120 { --bgl-grad-via: var(--bgl-red-120), ; } .via-red-130 { --bgl-grad-via: var(--bgl-red-130), ; }
145
+ .from-yellow-10 { --bgl-grad-from: var(--bgl-yellow-10); } .from-yellow-20 { --bgl-grad-from: var(--bgl-yellow-20); } .from-yellow-30 { --bgl-grad-from: var(--bgl-yellow-30); } .from-yellow-40 { --bgl-grad-from: var(--bgl-yellow-40); } .from-yellow-50 { --bgl-grad-from: var(--bgl-yellow-50); } .from-yellow-60 { --bgl-grad-from: var(--bgl-yellow-60); } .from-yellow-70 { --bgl-grad-from: var(--bgl-yellow-70); } .from-yellow-80 { --bgl-grad-from: var(--bgl-yellow-80); } .from-yellow-90 { --bgl-grad-from: var(--bgl-yellow-90); } .from-yellow-100 { --bgl-grad-from: var(--bgl-yellow-100); } .from-yellow-110 { --bgl-grad-from: var(--bgl-yellow-110); } .from-yellow-120 { --bgl-grad-from: var(--bgl-yellow-120); } .from-yellow-130 { --bgl-grad-from: var(--bgl-yellow-130); }
146
+ .to-yellow-10 { --bgl-grad-to: var(--bgl-yellow-10); } .to-yellow-20 { --bgl-grad-to: var(--bgl-yellow-20); } .to-yellow-30 { --bgl-grad-to: var(--bgl-yellow-30); } .to-yellow-40 { --bgl-grad-to: var(--bgl-yellow-40); } .to-yellow-50 { --bgl-grad-to: var(--bgl-yellow-50); } .to-yellow-60 { --bgl-grad-to: var(--bgl-yellow-60); } .to-yellow-70 { --bgl-grad-to: var(--bgl-yellow-70); } .to-yellow-80 { --bgl-grad-to: var(--bgl-yellow-80); } .to-yellow-90 { --bgl-grad-to: var(--bgl-yellow-90); } .to-yellow-100 { --bgl-grad-to: var(--bgl-yellow-100); } .to-yellow-110 { --bgl-grad-to: var(--bgl-yellow-110); } .to-yellow-120 { --bgl-grad-to: var(--bgl-yellow-120); } .to-yellow-130 { --bgl-grad-to: var(--bgl-yellow-130); }
147
+ .via-yellow-10 { --bgl-grad-via: var(--bgl-yellow-10), ; } .via-yellow-20 { --bgl-grad-via: var(--bgl-yellow-20), ; } .via-yellow-30 { --bgl-grad-via: var(--bgl-yellow-30), ; } .via-yellow-40 { --bgl-grad-via: var(--bgl-yellow-40), ; } .via-yellow-50 { --bgl-grad-via: var(--bgl-yellow-50), ; } .via-yellow-60 { --bgl-grad-via: var(--bgl-yellow-60), ; } .via-yellow-70 { --bgl-grad-via: var(--bgl-yellow-70), ; } .via-yellow-80 { --bgl-grad-via: var(--bgl-yellow-80), ; } .via-yellow-90 { --bgl-grad-via: var(--bgl-yellow-90), ; } .via-yellow-100 { --bgl-grad-via: var(--bgl-yellow-100), ; } .via-yellow-110 { --bgl-grad-via: var(--bgl-yellow-110), ; } .via-yellow-120 { --bgl-grad-via: var(--bgl-yellow-120), ; } .via-yellow-130 { --bgl-grad-via: var(--bgl-yellow-130), ; }
148
+ .from-purple-10 { --bgl-grad-from: var(--bgl-purple-10); } .from-purple-20 { --bgl-grad-from: var(--bgl-purple-20); } .from-purple-30 { --bgl-grad-from: var(--bgl-purple-30); } .from-purple-40 { --bgl-grad-from: var(--bgl-purple-40); } .from-purple-50 { --bgl-grad-from: var(--bgl-purple-50); } .from-purple-60 { --bgl-grad-from: var(--bgl-purple-60); } .from-purple-70 { --bgl-grad-from: var(--bgl-purple-70); } .from-purple-80 { --bgl-grad-from: var(--bgl-purple-80); } .from-purple-90 { --bgl-grad-from: var(--bgl-purple-90); } .from-purple-100 { --bgl-grad-from: var(--bgl-purple-100); } .from-purple-110 { --bgl-grad-from: var(--bgl-purple-110); } .from-purple-120 { --bgl-grad-from: var(--bgl-purple-120); } .from-purple-130 { --bgl-grad-from: var(--bgl-purple-130); }
149
+ .to-purple-10 { --bgl-grad-to: var(--bgl-purple-10); } .to-purple-20 { --bgl-grad-to: var(--bgl-purple-20); } .to-purple-30 { --bgl-grad-to: var(--bgl-purple-30); } .to-purple-40 { --bgl-grad-to: var(--bgl-purple-40); } .to-purple-50 { --bgl-grad-to: var(--bgl-purple-50); } .to-purple-60 { --bgl-grad-to: var(--bgl-purple-60); } .to-purple-70 { --bgl-grad-to: var(--bgl-purple-70); } .to-purple-80 { --bgl-grad-to: var(--bgl-purple-80); } .to-purple-90 { --bgl-grad-to: var(--bgl-purple-90); } .to-purple-100 { --bgl-grad-to: var(--bgl-purple-100); } .to-purple-110 { --bgl-grad-to: var(--bgl-purple-110); } .to-purple-120 { --bgl-grad-to: var(--bgl-purple-120); } .to-purple-130 { --bgl-grad-to: var(--bgl-purple-130); }
150
+ .via-purple-10 { --bgl-grad-via: var(--bgl-purple-10), ; } .via-purple-20 { --bgl-grad-via: var(--bgl-purple-20), ; } .via-purple-30 { --bgl-grad-via: var(--bgl-purple-30), ; } .via-purple-40 { --bgl-grad-via: var(--bgl-purple-40), ; } .via-purple-50 { --bgl-grad-via: var(--bgl-purple-50), ; } .via-purple-60 { --bgl-grad-via: var(--bgl-purple-60), ; } .via-purple-70 { --bgl-grad-via: var(--bgl-purple-70), ; } .via-purple-80 { --bgl-grad-via: var(--bgl-purple-80), ; } .via-purple-90 { --bgl-grad-via: var(--bgl-purple-90), ; } .via-purple-100 { --bgl-grad-via: var(--bgl-purple-100), ; } .via-purple-110 { --bgl-grad-via: var(--bgl-purple-110), ; } .via-purple-120 { --bgl-grad-via: var(--bgl-purple-120), ; } .via-purple-130 { --bgl-grad-via: var(--bgl-purple-130), ; }
151
+ .from-brown-10 { --bgl-grad-from: var(--bgl-brown-10); } .from-brown-20 { --bgl-grad-from: var(--bgl-brown-20); } .from-brown-30 { --bgl-grad-from: var(--bgl-brown-30); } .from-brown-40 { --bgl-grad-from: var(--bgl-brown-40); } .from-brown-50 { --bgl-grad-from: var(--bgl-brown-50); } .from-brown-60 { --bgl-grad-from: var(--bgl-brown-60); } .from-brown-70 { --bgl-grad-from: var(--bgl-brown-70); } .from-brown-80 { --bgl-grad-from: var(--bgl-brown-80); } .from-brown-90 { --bgl-grad-from: var(--bgl-brown-90); } .from-brown-100 { --bgl-grad-from: var(--bgl-brown-100); } .from-brown-110 { --bgl-grad-from: var(--bgl-brown-110); } .from-brown-120 { --bgl-grad-from: var(--bgl-brown-120); } .from-brown-130 { --bgl-grad-from: var(--bgl-brown-130); }
152
+ .to-brown-10 { --bgl-grad-to: var(--bgl-brown-10); } .to-brown-20 { --bgl-grad-to: var(--bgl-brown-20); } .to-brown-30 { --bgl-grad-to: var(--bgl-brown-30); } .to-brown-40 { --bgl-grad-to: var(--bgl-brown-40); } .to-brown-50 { --bgl-grad-to: var(--bgl-brown-50); } .to-brown-60 { --bgl-grad-to: var(--bgl-brown-60); } .to-brown-70 { --bgl-grad-to: var(--bgl-brown-70); } .to-brown-80 { --bgl-grad-to: var(--bgl-brown-80); } .to-brown-90 { --bgl-grad-to: var(--bgl-brown-90); } .to-brown-100 { --bgl-grad-to: var(--bgl-brown-100); } .to-brown-110 { --bgl-grad-to: var(--bgl-brown-110); } .to-brown-120 { --bgl-grad-to: var(--bgl-brown-120); } .to-brown-130 { --bgl-grad-to: var(--bgl-brown-130); }
153
+ .via-brown-10 { --bgl-grad-via: var(--bgl-brown-10), ; } .via-brown-20 { --bgl-grad-via: var(--bgl-brown-20), ; } .via-brown-30 { --bgl-grad-via: var(--bgl-brown-30), ; } .via-brown-40 { --bgl-grad-via: var(--bgl-brown-40), ; } .via-brown-50 { --bgl-grad-via: var(--bgl-brown-50), ; } .via-brown-60 { --bgl-grad-via: var(--bgl-brown-60), ; } .via-brown-70 { --bgl-grad-via: var(--bgl-brown-70), ; } .via-brown-80 { --bgl-grad-via: var(--bgl-brown-80), ; } .via-brown-90 { --bgl-grad-via: var(--bgl-brown-90), ; } .via-brown-100 { --bgl-grad-via: var(--bgl-brown-100), ; } .via-brown-110 { --bgl-grad-via: var(--bgl-brown-110), ; } .via-brown-120 { --bgl-grad-via: var(--bgl-brown-120), ; } .via-brown-130 { --bgl-grad-via: var(--bgl-brown-130), ; }
154
+ .from-orange-10 { --bgl-grad-from: var(--bgl-orange-10); } .from-orange-20 { --bgl-grad-from: var(--bgl-orange-20); } .from-orange-30 { --bgl-grad-from: var(--bgl-orange-30); } .from-orange-40 { --bgl-grad-from: var(--bgl-orange-40); } .from-orange-50 { --bgl-grad-from: var(--bgl-orange-50); } .from-orange-60 { --bgl-grad-from: var(--bgl-orange-60); } .from-orange-70 { --bgl-grad-from: var(--bgl-orange-70); } .from-orange-80 { --bgl-grad-from: var(--bgl-orange-80); } .from-orange-90 { --bgl-grad-from: var(--bgl-orange-90); } .from-orange-100 { --bgl-grad-from: var(--bgl-orange-100); } .from-orange-110 { --bgl-grad-from: var(--bgl-orange-110); } .from-orange-120 { --bgl-grad-from: var(--bgl-orange-120); } .from-orange-130 { --bgl-grad-from: var(--bgl-orange-130); }
155
+ .to-orange-10 { --bgl-grad-to: var(--bgl-orange-10); } .to-orange-20 { --bgl-grad-to: var(--bgl-orange-20); } .to-orange-30 { --bgl-grad-to: var(--bgl-orange-30); } .to-orange-40 { --bgl-grad-to: var(--bgl-orange-40); } .to-orange-50 { --bgl-grad-to: var(--bgl-orange-50); } .to-orange-60 { --bgl-grad-to: var(--bgl-orange-60); } .to-orange-70 { --bgl-grad-to: var(--bgl-orange-70); } .to-orange-80 { --bgl-grad-to: var(--bgl-orange-80); } .to-orange-90 { --bgl-grad-to: var(--bgl-orange-90); } .to-orange-100 { --bgl-grad-to: var(--bgl-orange-100); } .to-orange-110 { --bgl-grad-to: var(--bgl-orange-110); } .to-orange-120 { --bgl-grad-to: var(--bgl-orange-120); } .to-orange-130 { --bgl-grad-to: var(--bgl-orange-130); }
156
+ .via-orange-10 { --bgl-grad-via: var(--bgl-orange-10), ; } .via-orange-20 { --bgl-grad-via: var(--bgl-orange-20), ; } .via-orange-30 { --bgl-grad-via: var(--bgl-orange-30), ; } .via-orange-40 { --bgl-grad-via: var(--bgl-orange-40), ; } .via-orange-50 { --bgl-grad-via: var(--bgl-orange-50), ; } .via-orange-60 { --bgl-grad-via: var(--bgl-orange-60), ; } .via-orange-70 { --bgl-grad-via: var(--bgl-orange-70), ; } .via-orange-80 { --bgl-grad-via: var(--bgl-orange-80), ; } .via-orange-90 { --bgl-grad-via: var(--bgl-orange-90), ; } .via-orange-100 { --bgl-grad-via: var(--bgl-orange-100), ; } .via-orange-110 { --bgl-grad-via: var(--bgl-orange-110), ; } .via-orange-120 { --bgl-grad-via: var(--bgl-orange-120), ; } .via-orange-130 { --bgl-grad-via: var(--bgl-orange-130), ; }
157
+ .from-turquoise-10 { --bgl-grad-from: var(--bgl-turquoise-10); } .from-turquoise-20 { --bgl-grad-from: var(--bgl-turquoise-20); } .from-turquoise-30 { --bgl-grad-from: var(--bgl-turquoise-30); } .from-turquoise-40 { --bgl-grad-from: var(--bgl-turquoise-40); } .from-turquoise-50 { --bgl-grad-from: var(--bgl-turquoise-50); } .from-turquoise-60 { --bgl-grad-from: var(--bgl-turquoise-60); } .from-turquoise-70 { --bgl-grad-from: var(--bgl-turquoise-70); } .from-turquoise-80 { --bgl-grad-from: var(--bgl-turquoise-80); } .from-turquoise-90 { --bgl-grad-from: var(--bgl-turquoise-90); } .from-turquoise-100 { --bgl-grad-from: var(--bgl-turquoise-100); } .from-turquoise-110 { --bgl-grad-from: var(--bgl-turquoise-110); } .from-turquoise-120 { --bgl-grad-from: var(--bgl-turquoise-120); } .from-turquoise-130 { --bgl-grad-from: var(--bgl-turquoise-130); }
158
+ .to-turquoise-10 { --bgl-grad-to: var(--bgl-turquoise-10); } .to-turquoise-20 { --bgl-grad-to: var(--bgl-turquoise-20); } .to-turquoise-30 { --bgl-grad-to: var(--bgl-turquoise-30); } .to-turquoise-40 { --bgl-grad-to: var(--bgl-turquoise-40); } .to-turquoise-50 { --bgl-grad-to: var(--bgl-turquoise-50); } .to-turquoise-60 { --bgl-grad-to: var(--bgl-turquoise-60); } .to-turquoise-70 { --bgl-grad-to: var(--bgl-turquoise-70); } .to-turquoise-80 { --bgl-grad-to: var(--bgl-turquoise-80); } .to-turquoise-90 { --bgl-grad-to: var(--bgl-turquoise-90); } .to-turquoise-100 { --bgl-grad-to: var(--bgl-turquoise-100); } .to-turquoise-110 { --bgl-grad-to: var(--bgl-turquoise-110); } .to-turquoise-120 { --bgl-grad-to: var(--bgl-turquoise-120); } .to-turquoise-130 { --bgl-grad-to: var(--bgl-turquoise-130); }
159
+ .via-turquoise-10 { --bgl-grad-via: var(--bgl-turquoise-10), ; } .via-turquoise-20 { --bgl-grad-via: var(--bgl-turquoise-20), ; } .via-turquoise-30 { --bgl-grad-via: var(--bgl-turquoise-30), ; } .via-turquoise-40 { --bgl-grad-via: var(--bgl-turquoise-40), ; } .via-turquoise-50 { --bgl-grad-via: var(--bgl-turquoise-50), ; } .via-turquoise-60 { --bgl-grad-via: var(--bgl-turquoise-60), ; } .via-turquoise-70 { --bgl-grad-via: var(--bgl-turquoise-70), ; } .via-turquoise-80 { --bgl-grad-via: var(--bgl-turquoise-80), ; } .via-turquoise-90 { --bgl-grad-via: var(--bgl-turquoise-90), ; } .via-turquoise-100 { --bgl-grad-via: var(--bgl-turquoise-100), ; } .via-turquoise-110 { --bgl-grad-via: var(--bgl-turquoise-110), ; } .via-turquoise-120 { --bgl-grad-via: var(--bgl-turquoise-120), ; } .via-turquoise-130 { --bgl-grad-via: var(--bgl-turquoise-130), ; }
160
+ .from-pink-10 { --bgl-grad-from: var(--bgl-pink-10); } .from-pink-20 { --bgl-grad-from: var(--bgl-pink-20); } .from-pink-30 { --bgl-grad-from: var(--bgl-pink-30); } .from-pink-40 { --bgl-grad-from: var(--bgl-pink-40); } .from-pink-50 { --bgl-grad-from: var(--bgl-pink-50); } .from-pink-60 { --bgl-grad-from: var(--bgl-pink-60); } .from-pink-70 { --bgl-grad-from: var(--bgl-pink-70); } .from-pink-80 { --bgl-grad-from: var(--bgl-pink-80); } .from-pink-90 { --bgl-grad-from: var(--bgl-pink-90); } .from-pink-100 { --bgl-grad-from: var(--bgl-pink-100); } .from-pink-110 { --bgl-grad-from: var(--bgl-pink-110); } .from-pink-120 { --bgl-grad-from: var(--bgl-pink-120); } .from-pink-130 { --bgl-grad-from: var(--bgl-pink-130); }
161
+ .to-pink-10 { --bgl-grad-to: var(--bgl-pink-10); } .to-pink-20 { --bgl-grad-to: var(--bgl-pink-20); } .to-pink-30 { --bgl-grad-to: var(--bgl-pink-30); } .to-pink-40 { --bgl-grad-to: var(--bgl-pink-40); } .to-pink-50 { --bgl-grad-to: var(--bgl-pink-50); } .to-pink-60 { --bgl-grad-to: var(--bgl-pink-60); } .to-pink-70 { --bgl-grad-to: var(--bgl-pink-70); } .to-pink-80 { --bgl-grad-to: var(--bgl-pink-80); } .to-pink-90 { --bgl-grad-to: var(--bgl-pink-90); } .to-pink-100 { --bgl-grad-to: var(--bgl-pink-100); } .to-pink-110 { --bgl-grad-to: var(--bgl-pink-110); } .to-pink-120 { --bgl-grad-to: var(--bgl-pink-120); } .to-pink-130 { --bgl-grad-to: var(--bgl-pink-130); }
162
+ .via-pink-10 { --bgl-grad-via: var(--bgl-pink-10), ; } .via-pink-20 { --bgl-grad-via: var(--bgl-pink-20), ; } .via-pink-30 { --bgl-grad-via: var(--bgl-pink-30), ; } .via-pink-40 { --bgl-grad-via: var(--bgl-pink-40), ; } .via-pink-50 { --bgl-grad-via: var(--bgl-pink-50), ; } .via-pink-60 { --bgl-grad-via: var(--bgl-pink-60), ; } .via-pink-70 { --bgl-grad-via: var(--bgl-pink-70), ; } .via-pink-80 { --bgl-grad-via: var(--bgl-pink-80), ; } .via-pink-90 { --bgl-grad-via: var(--bgl-pink-90), ; } .via-pink-100 { --bgl-grad-via: var(--bgl-pink-100), ; } .via-pink-110 { --bgl-grad-via: var(--bgl-pink-110), ; } .via-pink-120 { --bgl-grad-via: var(--bgl-pink-120), ; } .via-pink-130 { --bgl-grad-via: var(--bgl-pink-130), ; }
163
+ .from-gray-10 { --bgl-grad-from: var(--bgl-gray-10); } .from-gray-20 { --bgl-grad-from: var(--bgl-gray-20); } .from-gray-30 { --bgl-grad-from: var(--bgl-gray-30); } .from-gray-40 { --bgl-grad-from: var(--bgl-gray-40); } .from-gray-50 { --bgl-grad-from: var(--bgl-gray-50); } .from-gray-60 { --bgl-grad-from: var(--bgl-gray-60); } .from-gray-70 { --bgl-grad-from: var(--bgl-gray-70); } .from-gray-80 { --bgl-grad-from: var(--bgl-gray-80); } .from-gray-90 { --bgl-grad-from: var(--bgl-gray-90); } .from-gray-100 { --bgl-grad-from: var(--bgl-gray-100); } .from-gray-110 { --bgl-grad-from: var(--bgl-gray-110); } .from-gray-120 { --bgl-grad-from: var(--bgl-gray-120); } .from-gray-130 { --bgl-grad-from: var(--bgl-gray-130); }
164
+ .to-gray-10 { --bgl-grad-to: var(--bgl-gray-10); } .to-gray-20 { --bgl-grad-to: var(--bgl-gray-20); } .to-gray-30 { --bgl-grad-to: var(--bgl-gray-30); } .to-gray-40 { --bgl-grad-to: var(--bgl-gray-40); } .to-gray-50 { --bgl-grad-to: var(--bgl-gray-50); } .to-gray-60 { --bgl-grad-to: var(--bgl-gray-60); } .to-gray-70 { --bgl-grad-to: var(--bgl-gray-70); } .to-gray-80 { --bgl-grad-to: var(--bgl-gray-80); } .to-gray-90 { --bgl-grad-to: var(--bgl-gray-90); } .to-gray-100 { --bgl-grad-to: var(--bgl-gray-100); } .to-gray-110 { --bgl-grad-to: var(--bgl-gray-110); } .to-gray-120 { --bgl-grad-to: var(--bgl-gray-120); } .to-gray-130 { --bgl-grad-to: var(--bgl-gray-130); }
165
+ .via-gray-10 { --bgl-grad-via: var(--bgl-gray-10), ; } .via-gray-20 { --bgl-grad-via: var(--bgl-gray-20), ; } .via-gray-30 { --bgl-grad-via: var(--bgl-gray-30), ; } .via-gray-40 { --bgl-grad-via: var(--bgl-gray-40), ; } .via-gray-50 { --bgl-grad-via: var(--bgl-gray-50), ; } .via-gray-60 { --bgl-grad-via: var(--bgl-gray-60), ; } .via-gray-70 { --bgl-grad-via: var(--bgl-gray-70), ; } .via-gray-80 { --bgl-grad-via: var(--bgl-gray-80), ; } .via-gray-90 { --bgl-grad-via: var(--bgl-gray-90), ; } .via-gray-100 { --bgl-grad-via: var(--bgl-gray-100), ; } .via-gray-110 { --bgl-grad-via: var(--bgl-gray-110), ; } .via-gray-120 { --bgl-grad-via: var(--bgl-gray-120), ; } .via-gray-130 { --bgl-grad-via: var(--bgl-gray-130), ; }
166
+ .from-black-10 { --bgl-grad-from: var(--bgl-black-10); } .from-black-20 { --bgl-grad-from: var(--bgl-black-20); } .from-black-30 { --bgl-grad-from: var(--bgl-black-30); } .from-black-40 { --bgl-grad-from: var(--bgl-black-40); } .from-black-50 { --bgl-grad-from: var(--bgl-black-50); } .from-black-60 { --bgl-grad-from: var(--bgl-black-60); } .from-black-70 { --bgl-grad-from: var(--bgl-black-70); } .from-black-80 { --bgl-grad-from: var(--bgl-black-80); } .from-black-90 { --bgl-grad-from: var(--bgl-black-90); } .from-black-100 { --bgl-grad-from: var(--bgl-black-100); } .from-black-110 { --bgl-grad-from: var(--bgl-black-110); } .from-black-120 { --bgl-grad-from: var(--bgl-black-120); } .from-black-130 { --bgl-grad-from: var(--bgl-black-130); }
167
+ .to-black-10 { --bgl-grad-to: var(--bgl-black-10); } .to-black-20 { --bgl-grad-to: var(--bgl-black-20); } .to-black-30 { --bgl-grad-to: var(--bgl-black-30); } .to-black-40 { --bgl-grad-to: var(--bgl-black-40); } .to-black-50 { --bgl-grad-to: var(--bgl-black-50); } .to-black-60 { --bgl-grad-to: var(--bgl-black-60); } .to-black-70 { --bgl-grad-to: var(--bgl-black-70); } .to-black-80 { --bgl-grad-to: var(--bgl-black-80); } .to-black-90 { --bgl-grad-to: var(--bgl-black-90); } .to-black-100 { --bgl-grad-to: var(--bgl-black-100); } .to-black-110 { --bgl-grad-to: var(--bgl-black-110); } .to-black-120 { --bgl-grad-to: var(--bgl-black-120); } .to-black-130 { --bgl-grad-to: var(--bgl-black-130); }
168
+ .via-black-10 { --bgl-grad-via: var(--bgl-black-10), ; } .via-black-20 { --bgl-grad-via: var(--bgl-black-20), ; } .via-black-30 { --bgl-grad-via: var(--bgl-black-30), ; } .via-black-40 { --bgl-grad-via: var(--bgl-black-40), ; } .via-black-50 { --bgl-grad-via: var(--bgl-black-50), ; } .via-black-60 { --bgl-grad-via: var(--bgl-black-60), ; } .via-black-70 { --bgl-grad-via: var(--bgl-black-70), ; } .via-black-80 { --bgl-grad-via: var(--bgl-black-80), ; } .via-black-90 { --bgl-grad-via: var(--bgl-black-90), ; } .via-black-100 { --bgl-grad-via: var(--bgl-black-100), ; } .via-black-110 { --bgl-grad-via: var(--bgl-black-110), ; } .via-black-120 { --bgl-grad-via: var(--bgl-black-120), ; } .via-black-130 { --bgl-grad-via: var(--bgl-black-130), ; }
169
+ .from-secondary-10 { --bgl-grad-from: var(--bgl-secondary-10); } .from-secondary-20 { --bgl-grad-from: var(--bgl-secondary-20); } .from-secondary-30 { --bgl-grad-from: var(--bgl-secondary-30); } .from-secondary-40 { --bgl-grad-from: var(--bgl-secondary-40); } .from-secondary-50 { --bgl-grad-from: var(--bgl-secondary-50); } .from-secondary-60 { --bgl-grad-from: var(--bgl-secondary-60); } .from-secondary-70 { --bgl-grad-from: var(--bgl-secondary-70); } .from-secondary-80 { --bgl-grad-from: var(--bgl-secondary-80); } .from-secondary-90 { --bgl-grad-from: var(--bgl-secondary-90); } .from-secondary-100 { --bgl-grad-from: var(--bgl-secondary-100); } .from-secondary-110 { --bgl-grad-from: var(--bgl-secondary-110); } .from-secondary-120 { --bgl-grad-from: var(--bgl-secondary-120); } .from-secondary-130 { --bgl-grad-from: var(--bgl-secondary-130); }
170
+ .to-secondary-10 { --bgl-grad-to: var(--bgl-secondary-10); } .to-secondary-20 { --bgl-grad-to: var(--bgl-secondary-20); } .to-secondary-30 { --bgl-grad-to: var(--bgl-secondary-30); } .to-secondary-40 { --bgl-grad-to: var(--bgl-secondary-40); } .to-secondary-50 { --bgl-grad-to: var(--bgl-secondary-50); } .to-secondary-60 { --bgl-grad-to: var(--bgl-secondary-60); } .to-secondary-70 { --bgl-grad-to: var(--bgl-secondary-70); } .to-secondary-80 { --bgl-grad-to: var(--bgl-secondary-80); } .to-secondary-90 { --bgl-grad-to: var(--bgl-secondary-90); } .to-secondary-100 { --bgl-grad-to: var(--bgl-secondary-100); } .to-secondary-110 { --bgl-grad-to: var(--bgl-secondary-110); } .to-secondary-120 { --bgl-grad-to: var(--bgl-secondary-120); } .to-secondary-130 { --bgl-grad-to: var(--bgl-secondary-130); }
171
+ .via-secondary-10 { --bgl-grad-via: var(--bgl-secondary-10), ; } .via-secondary-20 { --bgl-grad-via: var(--bgl-secondary-20), ; } .via-secondary-30 { --bgl-grad-via: var(--bgl-secondary-30), ; } .via-secondary-40 { --bgl-grad-via: var(--bgl-secondary-40), ; } .via-secondary-50 { --bgl-grad-via: var(--bgl-secondary-50), ; } .via-secondary-60 { --bgl-grad-via: var(--bgl-secondary-60), ; } .via-secondary-70 { --bgl-grad-via: var(--bgl-secondary-70), ; } .via-secondary-80 { --bgl-grad-via: var(--bgl-secondary-80), ; } .via-secondary-90 { --bgl-grad-via: var(--bgl-secondary-90), ; } .via-secondary-100 { --bgl-grad-via: var(--bgl-secondary-100), ; } .via-secondary-110 { --bgl-grad-via: var(--bgl-secondary-110), ; } .via-secondary-120 { --bgl-grad-via: var(--bgl-secondary-120), ; } .via-secondary-130 { --bgl-grad-via: var(--bgl-secondary-130), ; }
172
+ .from-tertiary-10 { --bgl-grad-from: var(--bgl-tertiary-10); } .from-tertiary-20 { --bgl-grad-from: var(--bgl-tertiary-20); } .from-tertiary-30 { --bgl-grad-from: var(--bgl-tertiary-30); } .from-tertiary-40 { --bgl-grad-from: var(--bgl-tertiary-40); } .from-tertiary-50 { --bgl-grad-from: var(--bgl-tertiary-50); } .from-tertiary-60 { --bgl-grad-from: var(--bgl-tertiary-60); } .from-tertiary-70 { --bgl-grad-from: var(--bgl-tertiary-70); } .from-tertiary-80 { --bgl-grad-from: var(--bgl-tertiary-80); } .from-tertiary-90 { --bgl-grad-from: var(--bgl-tertiary-90); } .from-tertiary-100 { --bgl-grad-from: var(--bgl-tertiary-100); } .from-tertiary-110 { --bgl-grad-from: var(--bgl-tertiary-110); } .from-tertiary-120 { --bgl-grad-from: var(--bgl-tertiary-120); } .from-tertiary-130 { --bgl-grad-from: var(--bgl-tertiary-130); }
173
+ .to-tertiary-10 { --bgl-grad-to: var(--bgl-tertiary-10); } .to-tertiary-20 { --bgl-grad-to: var(--bgl-tertiary-20); } .to-tertiary-30 { --bgl-grad-to: var(--bgl-tertiary-30); } .to-tertiary-40 { --bgl-grad-to: var(--bgl-tertiary-40); } .to-tertiary-50 { --bgl-grad-to: var(--bgl-tertiary-50); } .to-tertiary-60 { --bgl-grad-to: var(--bgl-tertiary-60); } .to-tertiary-70 { --bgl-grad-to: var(--bgl-tertiary-70); } .to-tertiary-80 { --bgl-grad-to: var(--bgl-tertiary-80); } .to-tertiary-90 { --bgl-grad-to: var(--bgl-tertiary-90); } .to-tertiary-100 { --bgl-grad-to: var(--bgl-tertiary-100); } .to-tertiary-110 { --bgl-grad-to: var(--bgl-tertiary-110); } .to-tertiary-120 { --bgl-grad-to: var(--bgl-tertiary-120); } .to-tertiary-130 { --bgl-grad-to: var(--bgl-tertiary-130); }
174
+ .via-tertiary-10 { --bgl-grad-via: var(--bgl-tertiary-10), ; } .via-tertiary-20 { --bgl-grad-via: var(--bgl-tertiary-20), ; } .via-tertiary-30 { --bgl-grad-via: var(--bgl-tertiary-30), ; } .via-tertiary-40 { --bgl-grad-via: var(--bgl-tertiary-40), ; } .via-tertiary-50 { --bgl-grad-via: var(--bgl-tertiary-50), ; } .via-tertiary-60 { --bgl-grad-via: var(--bgl-tertiary-60), ; } .via-tertiary-70 { --bgl-grad-via: var(--bgl-tertiary-70), ; } .via-tertiary-80 { --bgl-grad-via: var(--bgl-tertiary-80), ; } .via-tertiary-90 { --bgl-grad-via: var(--bgl-tertiary-90), ; } .via-tertiary-100 { --bgl-grad-via: var(--bgl-tertiary-100), ; } .via-tertiary-110 { --bgl-grad-via: var(--bgl-tertiary-110), ; } .via-tertiary-120 { --bgl-grad-via: var(--bgl-tertiary-120), ; } .via-tertiary-130 { --bgl-grad-via: var(--bgl-tertiary-130), ; }
175
+ .from-quaternary-10 { --bgl-grad-from: var(--bgl-quaternary-10); } .from-quaternary-20 { --bgl-grad-from: var(--bgl-quaternary-20); } .from-quaternary-30 { --bgl-grad-from: var(--bgl-quaternary-30); } .from-quaternary-40 { --bgl-grad-from: var(--bgl-quaternary-40); } .from-quaternary-50 { --bgl-grad-from: var(--bgl-quaternary-50); } .from-quaternary-60 { --bgl-grad-from: var(--bgl-quaternary-60); } .from-quaternary-70 { --bgl-grad-from: var(--bgl-quaternary-70); } .from-quaternary-80 { --bgl-grad-from: var(--bgl-quaternary-80); } .from-quaternary-90 { --bgl-grad-from: var(--bgl-quaternary-90); } .from-quaternary-100 { --bgl-grad-from: var(--bgl-quaternary-100); } .from-quaternary-110 { --bgl-grad-from: var(--bgl-quaternary-110); } .from-quaternary-120 { --bgl-grad-from: var(--bgl-quaternary-120); } .from-quaternary-130 { --bgl-grad-from: var(--bgl-quaternary-130); }
176
+ .to-quaternary-10 { --bgl-grad-to: var(--bgl-quaternary-10); } .to-quaternary-20 { --bgl-grad-to: var(--bgl-quaternary-20); } .to-quaternary-30 { --bgl-grad-to: var(--bgl-quaternary-30); } .to-quaternary-40 { --bgl-grad-to: var(--bgl-quaternary-40); } .to-quaternary-50 { --bgl-grad-to: var(--bgl-quaternary-50); } .to-quaternary-60 { --bgl-grad-to: var(--bgl-quaternary-60); } .to-quaternary-70 { --bgl-grad-to: var(--bgl-quaternary-70); } .to-quaternary-80 { --bgl-grad-to: var(--bgl-quaternary-80); } .to-quaternary-90 { --bgl-grad-to: var(--bgl-quaternary-90); } .to-quaternary-100 { --bgl-grad-to: var(--bgl-quaternary-100); } .to-quaternary-110 { --bgl-grad-to: var(--bgl-quaternary-110); } .to-quaternary-120 { --bgl-grad-to: var(--bgl-quaternary-120); } .to-quaternary-130 { --bgl-grad-to: var(--bgl-quaternary-130); }
177
+ .via-quaternary-10 { --bgl-grad-via: var(--bgl-quaternary-10), ; } .via-quaternary-20 { --bgl-grad-via: var(--bgl-quaternary-20), ; } .via-quaternary-30 { --bgl-grad-via: var(--bgl-quaternary-30), ; } .via-quaternary-40 { --bgl-grad-via: var(--bgl-quaternary-40), ; } .via-quaternary-50 { --bgl-grad-via: var(--bgl-quaternary-50), ; } .via-quaternary-60 { --bgl-grad-via: var(--bgl-quaternary-60), ; } .via-quaternary-70 { --bgl-grad-via: var(--bgl-quaternary-70), ; } .via-quaternary-80 { --bgl-grad-via: var(--bgl-quaternary-80), ; } .via-quaternary-90 { --bgl-grad-via: var(--bgl-quaternary-90), ; } .via-quaternary-100 { --bgl-grad-via: var(--bgl-quaternary-100), ; } .via-quaternary-110 { --bgl-grad-via: var(--bgl-quaternary-110), ; } .via-quaternary-120 { --bgl-grad-via: var(--bgl-quaternary-120), ; } .via-quaternary-130 { --bgl-grad-via: var(--bgl-quaternary-130), ; }
178
+
130
179
  /* ── Named presets — the gorgeous, copy-pasted brand sweeps, tokenized ──────── */
131
180
  .bg-gradient-brand {
132
181
  background-image: linear-gradient(135deg, var(--bgl-primary), var(--bgl-purple)) !important;