@vsn-ux/gaia-styles 0.6.6 → 0.6.7

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 (38) hide show
  1. package/dist/all-10pt.css +403 -403
  2. package/dist/all-no-reset-10pt.css +403 -403
  3. package/dist/all-no-reset.css +403 -403
  4. package/dist/all.css +403 -403
  5. package/dist/components/avatar.css +6 -6
  6. package/dist/components/badge.css +6 -6
  7. package/dist/components/breadcrumbs.css +13 -13
  8. package/dist/components/button.css +7 -7
  9. package/dist/components/calendar.css +27 -27
  10. package/dist/components/card.css +1 -1
  11. package/dist/components/checkbox.css +10 -10
  12. package/dist/components/container.css +4 -4
  13. package/dist/components/datepicker.css +2 -2
  14. package/dist/components/dropdown.css +18 -18
  15. package/dist/components/form-field.css +10 -10
  16. package/dist/components/input.css +9 -9
  17. package/dist/components/link.css +5 -5
  18. package/dist/components/menu.css +14 -14
  19. package/dist/components/modal.css +27 -27
  20. package/dist/components/notification.css +19 -19
  21. package/dist/components/page-header.css +12 -12
  22. package/dist/components/progress-bar.css +4 -4
  23. package/dist/components/progress-indicator.css +21 -21
  24. package/dist/components/quick-filter-button.css +5 -5
  25. package/dist/components/radio.css +13 -13
  26. package/dist/components/segmented-control.css +8 -8
  27. package/dist/components/select.css +31 -31
  28. package/dist/components/side-navigation.css +76 -76
  29. package/dist/components/switch.css +14 -14
  30. package/dist/components/tabs.css +14 -14
  31. package/dist/components/tag.css +7 -7
  32. package/dist/components/text-area.css +5 -5
  33. package/dist/components/tooltip.css +15 -15
  34. package/dist/components.css +403 -403
  35. package/package.json +1 -1
  36. package/src/styles/all-10pt.css +0 -5
  37. package/src/styles/all-no-reset-10pt.css +0 -5
  38. package/src/styles/theme.css +1 -1
package/dist/components/select.css CHANGED
@@ -3,16 +3,16 @@
3
3
  .ga-native-select {
4
4
  position: relative;
5
5
  select {
6
- height: calc(0.25rem * 10);
6
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
7
7
  appearance: none;
8
8
  border-radius: var(--ga-radius);
9
9
  border-style: var(--tw-border-style);
10
10
  border-width: 1px;
11
11
  border-color: var(--ga-color-border-primary);
12
12
  background-color: var(--ga-color-surface-primary);
13
- padding-block: calc(0.25rem * 2);
14
- padding-right: calc(0.25rem * 9);
15
- padding-left: calc(0.25rem * 3);
13
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
14
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 9);
15
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
16
16
  font-size: calc(
17
17
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
18
18
  );
@@ -29,26 +29,26 @@
29
29
  pointer-events: none;
30
30
  position: absolute;
31
31
  top: calc(1 / 2 * 100%);
32
- right: calc(0.25rem * 2);
32
+ right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
33
33
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
34
34
  translate: var(--tw-translate-x) var(--tw-translate-y);
35
35
  }
36
36
  }
37
37
  .ga-select {
38
38
  display: inline-flex;
39
- height: calc(0.25rem * 10);
40
- width: calc(0.25rem * 50);
39
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
40
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 50);
41
41
  cursor: pointer;
42
42
  appearance: none;
43
43
  align-items: flex-start;
44
- gap: calc(0.25rem * 2);
44
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
45
45
  border-radius: var(--ga-radius);
46
46
  border-style: var(--tw-border-style);
47
47
  border-width: 1px;
48
48
  border-color: var(--ga-color-border-primary);
49
49
  background-color: var(--ga-color-surface-primary);
50
- padding-inline: calc(0.25rem * 2.5);
51
- padding-block: calc(0.25rem * 1.5);
50
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.5);
51
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
52
52
  text-align: left;
53
53
  font-size: calc(
54
54
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -100,7 +100,7 @@
100
100
  }
101
101
  }
102
102
  .ga-select__placeholder {
103
- min-width: calc(0.25rem * 0);
103
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
104
104
  flex: 1;
105
105
  overflow: hidden;
106
106
  text-overflow: ellipsis;
@@ -108,11 +108,11 @@
108
108
  color: var(--ga-color-text-disabled);
109
109
  }
110
110
  .ga-select__input {
111
- height: calc(0.25rem * 6);
112
- min-width: calc(0.25rem * 0);
111
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
112
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
113
113
  flex: 1;
114
- --tw-leading: calc(0.25rem * 6);
115
- line-height: calc(0.25rem * 6);
114
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
115
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
116
116
  --tw-outline-style: none;
117
117
  outline-style: none;
118
118
  &:is(input)::placeholder {
@@ -125,18 +125,18 @@
125
125
  .ga-select__main-area {
126
126
  position: relative;
127
127
  display: flex;
128
- min-height: calc(0.25rem * 6.5);
129
- min-width: calc(0.25rem * 0);
128
+ min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
129
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
130
130
  flex: 1;
131
- --tw-leading: calc(0.25rem * 6.5);
132
- line-height: calc(0.25rem * 6.5);
131
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
132
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
133
133
  }
134
134
  .ga-select__input:not(:placeholder-shown) ~ .ga-select__value {
135
135
  display: none;
136
136
  }
137
137
  &:not(.ga-select--multi) {
138
138
  .ga-select__value {
139
- min-width: calc(0.25rem * 0);
139
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
140
140
  flex: 1;
141
141
  overflow: hidden;
142
142
  text-overflow: ellipsis;
@@ -144,34 +144,34 @@
144
144
  }
145
145
  .ga-select__input {
146
146
  position: absolute;
147
- top: calc(0.25rem * 0);
148
- left: calc(0.25rem * 0);
147
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
148
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
149
149
  height: 100%;
150
150
  width: 100%;
151
151
  }
152
152
  }
153
153
  &.ga-select--multi {
154
154
  height: auto;
155
- min-height: calc(0.25rem * 10);
155
+ min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
156
156
  .ga-select__main-area {
157
157
  display: flex;
158
- max-height: calc(0.25rem * 23.5);
159
- min-height: calc(0.25rem * 0);
158
+ max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 23.5);
159
+ min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
160
160
  flex: 1;
161
161
  flex-wrap: wrap;
162
- gap: calc(0.25rem * 2);
162
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
163
163
  overflow-y: auto;
164
164
  scrollbar-width: thin;
165
165
  }
166
166
  .ga-select__value {
167
167
  display: contents;
168
168
  .ga-tag {
169
- min-width: calc(0.25rem * 0);
169
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
170
170
  }
171
171
  }
172
172
  .ga-select__input {
173
- height: calc(0.25rem * 6.5);
174
- min-width: calc(0.25rem * 3);
173
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
174
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
175
175
  }
176
176
  &.ga-select--label-hidden {
177
177
  .ga-select__placeholder {
@@ -192,10 +192,10 @@
192
192
  }
193
193
  .ga-select__suffix {
194
194
  display: flex;
195
- height: calc(0.25rem * 6.5);
195
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
196
196
  flex-shrink: 0;
197
197
  align-items: center;
198
- gap: calc(0.25rem * 2);
198
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
199
199
  }
200
200
  }
201
201
  @property --tw-border-style {
package/dist/components/side-navigation.css CHANGED
@@ -3,11 +3,11 @@
3
3
  .ga-side-navigation {
4
4
  display: flex;
5
5
  height: 100%;
6
- width: calc(0.25rem * 80);
6
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
7
7
  flex-direction: column;
8
8
  border-radius: var(--ga-radius);
9
9
  background-color: var(--ga-color-surface-primary);
10
- padding: calc(0.25rem * 1);
10
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
11
11
  --tw-shadow: var(--ga-shadow-north);
12
12
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
13
13
  .ga-side-navigation__header {
@@ -23,9 +23,9 @@
23
23
  cursor: pointer;
24
24
  align-items: center;
25
25
  justify-content: space-between;
26
- gap: calc(0.25rem * 2);
26
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
27
27
  border-radius: var(--ga-radius);
28
- padding: calc(0.25rem * 3);
28
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
29
29
  --tw-outline-style: none;
30
30
  outline-style: none;
31
31
  &:hover {
@@ -58,7 +58,7 @@
58
58
  }
59
59
  }
60
60
  .ga-side-navigation__switcher-title {
61
- min-width: calc(0.25rem * 0);
61
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
62
62
  flex: 1;
63
63
  overflow: hidden;
64
64
  text-overflow: ellipsis;
@@ -82,7 +82,7 @@
82
82
  flex-shrink: 0;
83
83
  cursor: pointer;
84
84
  align-items: center;
85
- padding-block: calc(0.25rem * 2);
85
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
86
86
  color: var(--ga-color-icon-secondary);
87
87
  &:hover {
88
88
  color: var(--ga-color-icon-action);
@@ -91,25 +91,25 @@
91
91
  .ga-side-navigation__switcher-dropdown {
92
92
  position: absolute;
93
93
  top: 100%;
94
- right: calc(0.25rem * 0);
95
- left: calc(0.25rem * 0);
94
+ right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
95
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
96
96
  z-index: 10;
97
97
  display: flex;
98
- max-height: calc(0.25rem * 80);
98
+ max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
99
99
  flex-direction: column;
100
100
  overflow-y: auto;
101
101
  border-radius: var(--ga-radius);
102
102
  background-color: var(--ga-color-surface-primary);
103
- padding-inline: calc(0.25rem * 2);
104
- padding-top: calc(0.25rem * 4);
105
- padding-bottom: calc(0.25rem * 2);
103
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
104
+ padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
105
+ padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
106
106
  --tw-shadow: var(--ga-shadow-north);
107
107
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
108
108
  }
109
109
  .ga-side-navigation__switcher-dropdown-header {
110
- padding-inline: calc(0.25rem * 4);
111
- padding-top: calc(0.25rem * 1);
112
- padding-bottom: calc(0.25rem * 1);
110
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
111
+ padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
112
+ padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
113
113
  font-size: calc(
114
114
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
115
115
  );
@@ -127,9 +127,9 @@
127
127
  display: flex;
128
128
  cursor: pointer;
129
129
  align-items: center;
130
- gap: calc(0.25rem * 2);
130
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
131
131
  border-radius: var(--ga-radius);
132
- padding: calc(0.25rem * 4);
132
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
133
133
  text-align: left;
134
134
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
135
135
  transition-timing-function: var(--tw-ease, ease);
@@ -161,7 +161,7 @@
161
161
  }
162
162
  }
163
163
  .ga-side-navigation__switcher-dropdown-title {
164
- min-width: calc(0.25rem * 0);
164
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
165
165
  flex: 1;
166
166
  overflow: hidden;
167
167
  text-overflow: ellipsis;
@@ -181,15 +181,15 @@
181
181
  color: var(--ga-color-text-action);
182
182
  }
183
183
  .ga-side-navigation__switcher-dropdown-external {
184
- height: calc(0.25rem * 4);
185
- width: calc(0.25rem * 4);
184
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
185
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
186
186
  flex-shrink: 0;
187
187
  align-self: center;
188
188
  color: var(--ga-color-icon-secondary);
189
189
  }
190
190
  .ga-side-navigation__search {
191
- margin-inline: calc(0.25rem * 3);
192
- margin-block: calc(0.25rem * 2);
191
+ margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
192
+ margin-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
193
193
  &.ga-input {
194
194
  width: auto;
195
195
  &:not(:hover) {
@@ -209,7 +209,7 @@
209
209
  border-width: 1px;
210
210
  border-color: var(--ga-color-border-disabled);
211
211
  background-color: #fff;
212
- padding-inline: calc(0.25rem * 1);
212
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
213
213
  padding-block: 1px;
214
214
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
215
215
  font-feature-settings: 'liga' 1, 'calt' 1;
@@ -229,8 +229,8 @@
229
229
  flex: 1;
230
230
  flex-direction: column;
231
231
  overflow-y: auto;
232
- padding-inline: calc(0.25rem * 3);
233
- padding-block: calc(0.25rem * 2);
232
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
233
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
234
234
  }
235
235
  .ga-side-navigation__item {
236
236
  position: relative;
@@ -238,10 +238,10 @@
238
238
  cursor: pointer;
239
239
  flex-direction: row;
240
240
  align-items: center;
241
- gap: calc(0.25rem * 3);
241
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
242
242
  border-radius: var(--ga-radius);
243
- padding-inline: calc(0.25rem * 4);
244
- padding-block: calc(0.25rem * 3);
243
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
244
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
245
245
  text-align: left;
246
246
  font-size: calc(
247
247
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -275,9 +275,9 @@
275
275
  &::before {
276
276
  position: absolute;
277
277
  top: calc(1 / 2 * 100%);
278
- left: calc(0.25rem * 0);
279
- height: calc(0.25rem * 8);
280
- width: calc(0.25rem * 1);
278
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
279
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
280
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
281
281
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
282
282
  translate: var(--tw-translate-x) var(--tw-translate-y);
283
283
  border-top-right-radius: var(--ga-radius);
@@ -311,23 +311,23 @@
311
311
  }
312
312
  }
313
313
  .ga-side-navigation__item--level-2 {
314
- padding-left: calc(0.25rem * 8);
314
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
315
315
  }
316
316
  .ga-side-navigation__item--level-3 {
317
- padding-left: calc(0.25rem * 14);
317
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
318
318
  }
319
319
  .ga-side-navigation__item--level-4 {
320
- padding-left: calc(0.25rem * 20);
320
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
321
321
  }
322
322
  .ga-side-navigation__item-icon {
323
- height: calc(0.25rem * 4);
324
- width: calc(0.25rem * 4);
323
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
324
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
325
325
  flex-shrink: 0;
326
326
  color: var(--ga-color-icon-primary);
327
327
  }
328
328
  .ga-side-navigation__item-content {
329
329
  display: flex;
330
- min-width: calc(0.25rem * 0);
330
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
331
331
  flex: 1;
332
332
  flex-direction: column;
333
333
  }
@@ -362,15 +362,15 @@
362
362
  color: var(--ga-color-text-secondary);
363
363
  }
364
364
  .ga-side-navigation__item-external {
365
- height: calc(0.25rem * 4);
366
- width: calc(0.25rem * 4);
365
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
366
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
367
367
  flex-shrink: 0;
368
368
  align-self: center;
369
369
  color: var(--ga-color-icon-secondary);
370
370
  }
371
371
  .ga-side-navigation__recent-title {
372
- padding-inline: calc(0.25rem * 4);
373
- padding-block: calc(0.25rem * 3);
372
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
373
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
374
374
  font-size: calc(
375
375
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
376
376
  );
@@ -389,10 +389,10 @@
389
389
  cursor: pointer;
390
390
  flex-direction: row;
391
391
  align-items: center;
392
- gap: calc(0.25rem * 3);
392
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
393
393
  border-radius: var(--ga-radius);
394
- padding-block: calc(0.25rem * 2);
395
- padding-left: calc(0.25rem * 4);
394
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
395
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
396
396
  text-align: left;
397
397
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
398
398
  transition-timing-function: var(--tw-ease, ease);
@@ -413,7 +413,7 @@
413
413
  }
414
414
  .ga-side-navigation__recent-item-content {
415
415
  display: flex;
416
- min-width: calc(0.25rem * 0);
416
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
417
417
  flex-direction: column;
418
418
  }
419
419
  .ga-side-navigation__recent-item-label {
@@ -429,8 +429,8 @@
429
429
  letter-spacing: var(--tw-tracking, calc(
430
430
  var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
431
431
  ));
432
- --tw-leading: calc(0.25rem * 6);
433
- line-height: calc(0.25rem * 6);
432
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
433
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
434
434
  --tw-font-weight: 500;
435
435
  font-weight: 500;
436
436
  color: var(--ga-color-text-action);
@@ -451,7 +451,7 @@
451
451
  color: var(--ga-color-text-on-disabled);
452
452
  }
453
453
  .ga-side-navigation__search-results-title {
454
- padding-inline: calc(0.25rem * 6);
454
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
455
455
  font-size: calc(
456
456
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
457
457
  );
@@ -459,23 +459,23 @@
459
459
  var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
460
460
  ));
461
461
  letter-spacing: var(--tw-tracking, 0);
462
- --tw-leading: calc(0.25rem * 6);
463
- line-height: calc(0.25rem * 6);
462
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
463
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
464
464
  --tw-font-weight: 500;
465
465
  font-weight: 500;
466
466
  color: var(--ga-color-text-disable-selected);
467
467
  }
468
468
  .ga-side-navigation__search-results-item {
469
469
  position: relative;
470
- margin-inline: calc(0.25rem * 3);
470
+ margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
471
471
  display: flex;
472
472
  cursor: pointer;
473
473
  flex-direction: row;
474
474
  align-items: center;
475
- gap: calc(0.25rem * 3);
475
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
476
476
  border-radius: var(--ga-radius);
477
- padding-inline: calc(0.25rem * 3);
478
- padding-block: calc(0.25rem * 2);
477
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
478
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
479
479
  text-align: left;
480
480
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
481
481
  transition-timing-function: var(--tw-ease, ease);
@@ -502,7 +502,7 @@
502
502
  }
503
503
  .ga-side-navigation__search-results-item-content {
504
504
  display: flex;
505
- min-width: calc(0.25rem * 0);
505
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
506
506
  flex: 1;
507
507
  flex-direction: column;
508
508
  }
@@ -519,8 +519,8 @@
519
519
  letter-spacing: var(--tw-tracking, calc(
520
520
  var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
521
521
  ));
522
- --tw-leading: calc(0.25rem * 6);
523
- line-height: calc(0.25rem * 6);
522
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
523
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
524
524
  --tw-font-weight: 500;
525
525
  font-weight: 500;
526
526
  color: var(--ga-color-text-action);
@@ -541,8 +541,8 @@
541
541
  color: var(--ga-color-text-on-disabled);
542
542
  }
543
543
  .ga-side-navigation__search-results-item-external {
544
- height: calc(0.25rem * 4);
545
- width: calc(0.25rem * 4);
544
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
545
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
546
546
  flex-shrink: 0;
547
547
  align-self: center;
548
548
  color: var(--ga-color-icon-secondary);
@@ -554,17 +554,17 @@
554
554
  border-top-style: var(--tw-border-style);
555
555
  border-top-width: 1px;
556
556
  border-color: var(--ga-color-border-tertiary);
557
- padding-top: calc(0.25rem * 1);
557
+ padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
558
558
  }
559
559
  .ga-side-navigation__user {
560
560
  position: relative;
561
561
  display: flex;
562
562
  cursor: pointer;
563
563
  align-items: center;
564
- gap: calc(0.25rem * 3);
564
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
565
565
  border-radius: var(--ga-radius);
566
- padding-inline: calc(0.25rem * 4);
567
- padding-block: calc(0.25rem * 3);
566
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
567
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
568
568
  --tw-outline-style: none;
569
569
  outline-style: none;
570
570
  &:hover {
@@ -587,8 +587,8 @@
587
587
  }
588
588
  }
589
589
  .ga-side-navigation__user-avatar {
590
- height: calc(0.25rem * 10);
591
- width: calc(0.25rem * 10);
590
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
591
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
592
592
  flex-shrink: 0;
593
593
  border-radius: calc(infinity * 1px);
594
594
  }
@@ -622,17 +622,17 @@
622
622
  }
623
623
  .ga-side-navigation__footer-dropdown {
624
624
  position: absolute;
625
- right: calc(0.25rem * 0);
625
+ right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
626
626
  bottom: 100%;
627
- left: calc(0.25rem * 0);
627
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
628
628
  z-index: 10;
629
629
  display: flex;
630
- max-height: calc(0.25rem * 80);
630
+ max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
631
631
  flex-direction: column;
632
632
  overflow-y: auto;
633
633
  border-radius: var(--ga-radius);
634
634
  background-color: var(--ga-color-surface-primary);
635
- padding: calc(0.25rem * 3);
635
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
636
636
  --tw-shadow: var(--ga-shadow-south);
637
637
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
638
638
  }
@@ -641,11 +641,11 @@
641
641
  display: flex;
642
642
  cursor: pointer;
643
643
  align-items: center;
644
- gap: calc(0.25rem * 3);
644
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
645
645
  border-radius: var(--ga-radius);
646
- padding-block: calc(0.25rem * 3);
647
- padding-right: calc(0.25rem * 2);
648
- padding-left: calc(0.25rem * 4);
646
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
647
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
648
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
649
649
  text-align: left;
650
650
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
651
651
  transition-timing-function: var(--tw-ease, ease);
@@ -689,13 +689,13 @@
689
689
  }
690
690
  }
691
691
  .ga-side-navigation__footer-dropdown-icon {
692
- height: calc(0.25rem * 4);
693
- width: calc(0.25rem * 4);
692
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
693
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
694
694
  flex-shrink: 0;
695
695
  color: var(--ga-color-icon-primary);
696
696
  }
697
697
  .ga-side-navigation__footer-dropdown-title {
698
- min-width: calc(0.25rem * 0);
698
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
699
699
  flex: 1;
700
700
  overflow: hidden;
701
701
  text-overflow: ellipsis;
package/dist/components/switch.css CHANGED
@@ -4,15 +4,15 @@
4
4
  position: relative;
5
5
  display: inline-flex;
6
6
  align-items: center;
7
- gap: calc(0.25rem * 3);
7
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
8
8
  .ga-switch__marker {
9
9
  pointer-events: none;
10
10
  position: absolute;
11
- top: calc(0.25rem * 0);
12
- left: calc(0.25rem * 0);
11
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
12
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
13
13
  display: inline-block;
14
- height: calc(0.25rem * 6);
15
- width: calc(0.25rem * 12);
14
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
15
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 12);
16
16
  border-radius: calc(infinity * 1px);
17
17
  border-style: var(--tw-border-style);
18
18
  border-width: 1px;
@@ -26,8 +26,8 @@
26
26
  }
27
27
  .ga-switch__check-icon {
28
28
  position: absolute;
29
- top: calc(0.25rem * 0.75);
30
- left: calc(0.25rem * 1.5);
29
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.75);
30
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
31
31
  color: var(--ga-color-icon-on-primary);
32
32
  opacity: 0%;
33
33
  transition-property: opacity;
@@ -39,11 +39,11 @@
39
39
  .ga-switch__slider {
40
40
  pointer-events: none;
41
41
  position: absolute;
42
- top: calc(0.25rem * 0.75);
43
- left: calc(0.25rem * 0.75);
42
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.75);
43
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.75);
44
44
  display: inline-block;
45
- height: calc(0.25rem * 4);
46
- width: calc(0.25rem * 4);
45
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
46
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
47
47
  border-radius: calc(infinity * 1px);
48
48
  background-color: var(--ga-color-surface-action);
49
49
  transition-property: transform, translate, scale, rotate;
@@ -58,8 +58,8 @@
58
58
  }
59
59
  input {
60
60
  display: inline-block;
61
- height: calc(0.25rem * 6);
62
- width: calc(0.25rem * 12);
61
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
62
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 12);
63
63
  flex-shrink: 0;
64
64
  cursor: pointer;
65
65
  border-radius: calc(infinity * 1px);
@@ -75,7 +75,7 @@
75
75
  border-color: var(--ga-color-border-action);
76
76
  background-color: var(--ga-color-surface-action);
77
77
  .ga-switch__slider {
78
- --tw-translate-x: calc(0.25rem * 6);
78
+ --tw-translate-x: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
79
79
  translate: var(--tw-translate-x) var(--tw-translate-y);
80
80
  background-color: var(--ga-color-surface-primary);
81
81
  }