@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/avatar.css CHANGED
@@ -2,8 +2,8 @@
2
2
  @layer properties;
3
3
  .ga-avatar {
4
4
  display: inline-flex;
5
- height: calc(0.25rem * 10);
6
- width: calc(0.25rem * 10);
5
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
6
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
7
7
  align-items: center;
8
8
  justify-content: center;
9
9
  overflow: hidden;
@@ -14,8 +14,8 @@
14
14
  --tw-font-weight: 700;
15
15
  font-weight: 700;
16
16
  &.ga-avatar--small {
17
- height: calc(0.25rem * 6);
18
- width: calc(0.25rem * 6);
17
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
18
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
19
19
  font-size: calc(
20
20
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
21
21
  );
@@ -25,8 +25,8 @@
25
25
  letter-spacing: var(--tw-tracking, 0);
26
26
  }
27
27
  &.ga-avatar--large {
28
- height: calc(0.25rem * 16);
29
- width: calc(0.25rem * 16);
28
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
29
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
30
30
  font-size: calc(
31
31
  var(--ga-text-2xl-font-size) * var(--ga-base-scaling-factor, 1)
32
32
  );
package/dist/components/badge.css CHANGED
@@ -5,8 +5,8 @@
5
5
  border-radius: calc(infinity * 1px);
6
6
  vertical-align: baseline;
7
7
  &.ga-badge--text {
8
- min-width: calc(0.25rem * 6);
9
- padding: calc(0.25rem * 1);
8
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
9
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
10
10
  text-align: center;
11
11
  font-size: calc(
12
12
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
@@ -15,8 +15,8 @@
15
15
  var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
16
16
  ));
17
17
  letter-spacing: var(--tw-tracking, 0);
18
- --tw-leading: calc(0.25rem * 4);
19
- line-height: calc(0.25rem * 4);
18
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
19
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
20
20
  --tw-font-weight: 500;
21
21
  font-weight: 500;
22
22
  white-space: nowrap;
@@ -74,8 +74,8 @@
74
74
  }
75
75
  }
76
76
  &.ga-badge--dot {
77
- height: calc(0.25rem * 2);
78
- width: calc(0.25rem * 2);
77
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
78
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
79
79
  &.ga-badge--default {
80
80
  background-color: var(--ga-color-surface-action);
81
81
  }
package/dist/components/breadcrumbs.css CHANGED
@@ -5,13 +5,13 @@
5
5
  flex-wrap: wrap;
6
6
  align-content: flex-start;
7
7
  align-items: flex-start;
8
- gap: calc(0.25rem * 6);
8
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
9
9
  }
10
10
  .ga-breadcrumb-item {
11
11
  position: relative;
12
12
  display: inline-flex;
13
13
  align-items: center;
14
- gap: calc(0.25rem * 6);
14
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
15
15
  .ga-breadcrumb-item__explorer {
16
16
  cursor: pointer;
17
17
  border-radius: var(--ga-radius);
@@ -40,7 +40,7 @@
40
40
  }
41
41
  &.ga-breadcrumb-item--overflow {
42
42
  align-items: center;
43
- gap: calc(0.25rem * 3);
43
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
44
44
  .ga-breadcrumb-item__menu {
45
45
  left: calc(var(--ga-size-spacing-02) * -1);
46
46
  }
@@ -49,7 +49,7 @@
49
49
  cursor: pointer;
50
50
  align-items: center;
51
51
  justify-content: center;
52
- gap: calc(0.25rem * 2);
52
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
53
53
  border-radius: var(--ga-radius);
54
54
  font-size: calc(
55
55
  var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
@@ -69,7 +69,7 @@
69
69
  transition-duration: var(--ga-duration-instant);
70
70
  transition-timing-function: var(--ga-easing-standard);
71
71
  .ga-breadcrumb-item__label {
72
- max-width: calc(0.25rem * 80);
72
+ max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
73
73
  overflow: hidden;
74
74
  text-overflow: ellipsis;
75
75
  white-space: nowrap;
@@ -122,9 +122,9 @@
122
122
  }
123
123
  }
124
124
  &.ga-breadcrumb-item--current-page {
125
- gap: calc(0.25rem * 3);
125
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
126
126
  .ga-breadcrumb-item__trigger {
127
- padding-right: calc(0.25rem * 1);
127
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
128
128
  font-size: calc(
129
129
  var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
130
130
  );
@@ -138,7 +138,7 @@
138
138
  font-weight: 600;
139
139
  color: var(--ga-color-text-body);
140
140
  .ga-breadcrumb-item__label {
141
- max-width: calc(0.25rem * 80);
141
+ max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
142
142
  overflow: hidden;
143
143
  text-overflow: ellipsis;
144
144
  white-space: nowrap;
@@ -147,7 +147,7 @@
147
147
  }
148
148
  &.ga-breadcrumb-item--back {
149
149
  align-items: center;
150
- gap: calc(0.25rem * 2);
150
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
151
151
  .ga-breadcrumb-item__trigger {
152
152
  display: inline-flex;
153
153
  cursor: pointer;
@@ -198,13 +198,13 @@
198
198
  }
199
199
  }
200
200
  &.ga-breadcrumb-item--link {
201
- gap: calc(0.25rem * 3);
201
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
202
202
  .ga-breadcrumb-item__trigger {
203
203
  display: inline-flex;
204
204
  cursor: pointer;
205
205
  align-items: center;
206
206
  border-radius: var(--ga-radius);
207
- padding-right: calc(0.25rem * 1);
207
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
208
208
  font-size: calc(
209
209
  var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
210
210
  );
@@ -223,7 +223,7 @@
223
223
  transition-duration: var(--ga-duration-instant);
224
224
  transition-timing-function: var(--ga-easing-standard);
225
225
  .ga-breadcrumb-item__label {
226
- max-width: calc(0.25rem * 80);
226
+ max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
227
227
  overflow: hidden;
228
228
  text-overflow: ellipsis;
229
229
  white-space: nowrap;
@@ -251,7 +251,7 @@
251
251
  }
252
252
  }
253
253
  .ga-breadcrumb-item__explorer {
254
- padding-right: calc(0.25rem * 1);
254
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
255
255
  }
256
256
  .ga-breadcrumb-item__separator {
257
257
  font-size: calc(
package/dist/components/button.css CHANGED
@@ -2,13 +2,13 @@
2
2
  @layer properties;
3
3
  .ga-button {
4
4
  display: inline-flex;
5
- height: calc(0.25rem * 10);
5
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
6
6
  cursor: pointer;
7
7
  align-items: center;
8
8
  justify-content: center;
9
- gap: calc(0.25rem * 2);
9
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
10
10
  border-radius: var(--ga-radius);
11
- padding-inline: calc(0.25rem * 4);
11
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
12
12
  vertical-align: middle;
13
13
  font-size: calc(
14
14
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -19,8 +19,8 @@
19
19
  letter-spacing: var(--tw-tracking, calc(
20
20
  var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
21
21
  ));
22
- --tw-leading: calc(0.25rem * 1);
23
- line-height: calc(0.25rem * 1);
22
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
23
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
24
24
  --tw-font-weight: 500;
25
25
  font-weight: 500;
26
26
  white-space: nowrap;
@@ -133,8 +133,8 @@
133
133
  }
134
134
  }
135
135
  &.ga-button--icon-only {
136
- width: calc(0.25rem * 10);
137
- padding-inline: calc(0.25rem * 0);
136
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
137
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
138
138
  }
139
139
  }
140
140
  @property --tw-leading {
package/dist/components/calendar.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  .ga-calendar {
4
- width: calc(0.25rem * 70);
4
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 70);
5
5
  background-color: #fff;
6
6
  --tw-numeric-figure: lining-nums;
7
7
  --tw-slashed-zero: slashed-zero;
@@ -12,19 +12,19 @@
12
12
  flex-direction: row;
13
13
  align-items: center;
14
14
  justify-content: space-between;
15
- gap: calc(0.25rem * 1);
15
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
16
16
  }
17
17
  .ga-calendar__month-year {
18
18
  display: flex;
19
19
  flex-direction: row;
20
- gap: calc(0.25rem * 2);
20
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
21
21
  }
22
22
  .ga-calendar__month-year-button {
23
23
  display: flex;
24
24
  cursor: pointer;
25
25
  flex-direction: row;
26
26
  align-items: center;
27
- gap: calc(0.25rem * 1);
27
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
28
28
  font-size: calc(
29
29
  var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
30
30
  );
@@ -44,7 +44,7 @@
44
44
  .ga-calendar__navigation {
45
45
  display: flex;
46
46
  flex-direction: row;
47
- gap: calc(0.25rem * 2);
47
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
48
48
  }
49
49
  .ga-calendar__navigation-button {
50
50
  cursor: pointer;
@@ -62,33 +62,33 @@
62
62
  .ga-calendar__week-row {
63
63
  display: flex;
64
64
  flex-direction: row;
65
- gap: calc(0.25rem * 4);
65
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
66
66
  }
67
67
  .ga-calendar__week-day {
68
- width: calc(0.25rem * 6);
69
- height: calc(0.25rem * 6);
68
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
69
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
70
70
  }
71
71
  .ga-calendar__selection {
72
72
  display: grid;
73
73
  &.ga-calendar__selection--year {
74
- margin-top: calc(0.25rem * 4);
74
+ margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
75
75
  grid-template-columns: repeat(5, minmax(0, 1fr));
76
- column-gap: calc(0.25rem * 3);
77
- row-gap: calc(0.25rem * 2);
76
+ column-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
77
+ row-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
78
78
  }
79
79
  &.ga-calendar__selection--month {
80
- margin-top: calc(0.25rem * 4);
80
+ margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
81
81
  grid-template-columns: repeat(3, minmax(0, 1fr));
82
- gap: calc(0.25rem * 3);
82
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
83
83
  }
84
84
  &.ga-calendar__selection--day {
85
- margin-top: calc(0.25rem * 2);
85
+ margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
86
86
  grid-template-columns: repeat(7, minmax(0, 1fr));
87
- row-gap: calc(0.25rem * 1);
87
+ row-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
88
88
  }
89
89
  }
90
90
  .ga-calendar__year, .ga-calendar__month {
91
- height: calc(0.25rem * 10);
91
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
92
92
  cursor: pointer;
93
93
  border-radius: var(--ga-radius);
94
94
  text-align: center;
@@ -101,8 +101,8 @@
101
101
  letter-spacing: var(--tw-tracking, calc(
102
102
  var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
103
103
  ));
104
- --tw-leading: calc(0.25rem * 10);
105
- line-height: calc(0.25rem * 10);
104
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
105
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
106
106
  --tw-font-weight: 500;
107
107
  font-weight: 500;
108
108
  color: var(--ga-color-text-action);
@@ -137,7 +137,7 @@
137
137
  .ga-calendar__day {
138
138
  position: relative;
139
139
  display: flex;
140
- height: calc(0.25rem * 10);
140
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
141
141
  cursor: pointer;
142
142
  align-items: center;
143
143
  justify-content: center;
@@ -164,10 +164,10 @@
164
164
  }
165
165
  &.ga-calendar__day--current::after {
166
166
  position: absolute;
167
- bottom: calc(0.25rem * 2);
167
+ bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
168
168
  left: calc(1 / 2 * 100%);
169
- height: calc(0.25rem * 0.5);
170
- width: calc(0.25rem * 5);
169
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
170
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
171
171
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
172
172
  translate: var(--tw-translate-x) var(--tw-translate-y);
173
173
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
@@ -178,10 +178,10 @@
178
178
  }
179
179
  &.ga-calendar__day--special::after {
180
180
  position: absolute;
181
- bottom: calc(0.25rem * 2);
181
+ bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
182
182
  left: calc(1 / 2 * 100%);
183
- height: calc(0.25rem * 1);
184
- width: calc(0.25rem * 1);
183
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
184
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
185
185
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
186
186
  translate: var(--tw-translate-x) var(--tw-translate-y);
187
187
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
@@ -257,9 +257,9 @@
257
257
  }
258
258
  }
259
259
  .ga-calendar__weekdays {
260
- margin-top: calc(0.25rem * 2);
260
+ margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
261
261
  display: grid;
262
- height: calc(0.25rem * 6);
262
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
263
263
  grid-template-columns: repeat(7, minmax(0, 1fr));
264
264
  align-items: center;
265
265
  justify-items: center;
package/dist/components/card.css CHANGED
@@ -7,7 +7,7 @@
7
7
  border-width: 1px;
8
8
  border-color: var(--ga-color-border-tertiary);
9
9
  background-color: #fff;
10
- padding: calc(0.25rem * 4);
10
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
11
11
  font-size: calc(
12
12
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
13
13
  );
package/dist/components/checkbox.css CHANGED
@@ -3,14 +3,14 @@
3
3
  .ga-checkbox {
4
4
  position: relative;
5
5
  display: inline-flex;
6
- gap: calc(0.25rem * 2);
6
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
7
7
  .ga-checkbox__marker {
8
8
  pointer-events: none;
9
9
  position: absolute;
10
- top: calc(0.25rem * 0);
11
- left: calc(0.25rem * 0);
12
- height: calc(0.25rem * 4);
13
- width: calc(0.25rem * 4);
10
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
11
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
12
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
13
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
14
14
  border-radius: var(--ga-radius);
15
15
  border-style: var(--tw-border-style);
16
16
  border-width: 2px;
@@ -26,8 +26,8 @@
26
26
  }
27
27
  }
28
28
  .ga-checkbox__native {
29
- height: calc(0.25rem * 4);
30
- width: calc(0.25rem * 4);
29
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
30
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
31
31
  flex-shrink: 0;
32
32
  cursor: pointer;
33
33
  opacity: 0%;
@@ -80,7 +80,7 @@
80
80
  }
81
81
  }
82
82
  .ga-checkbox__label {
83
- min-height: calc(0.25rem * 4);
83
+ min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
84
84
  font-size: calc(
85
85
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
86
86
  );
@@ -90,8 +90,8 @@
90
90
  letter-spacing: var(--tw-tracking, calc(
91
91
  var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
92
92
  ));
93
- --tw-leading: calc(0.25rem * 4);
94
- line-height: calc(0.25rem * 4);
93
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
94
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
95
95
  &:empty {
96
96
  display: none;
97
97
  }
package/dist/components/container.css CHANGED
@@ -1,19 +1,19 @@
1
1
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  .ga-container {
3
- margin-inline: calc(0.25rem * 4);
3
+ margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
4
4
  }
5
5
  @media (min-width: 840px) {
6
6
  .ga-container {
7
- margin-inline: calc(0.25rem * 6);
7
+ margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
8
8
  }
9
9
  }
10
10
  @media (min-width: 1440px) {
11
11
  .ga-container {
12
- margin-inline: calc(0.25rem * 8);
12
+ margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
13
13
  }
14
14
  }
15
15
  @media (min-width: 1920px) {
16
16
  .ga-container {
17
- margin-inline: calc(0.25rem * 10);
17
+ margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
18
18
  }
19
19
  }
package/dist/components/datepicker.css CHANGED
@@ -6,11 +6,11 @@
6
6
  border-width: 1px;
7
7
  border-color: var(--ga-color-border-primary);
8
8
  background-color: var(--ga-color-surface-primary);
9
- padding: calc(0.25rem * 4);
9
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
10
10
  --tw-shadow: var(--ga-shadow-north);
11
11
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
12
12
  .ga-datepicker__footer {
13
- margin-top: calc(0.25rem * 2);
13
+ margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
14
14
  }
15
15
  }
16
16
  .ga-datepicker-toggle {
package/dist/components/dropdown.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @layer properties;
3
3
  .ga-dropdown {
4
4
  display: flex;
5
- max-height: calc(0.25rem * 81);
5
+ max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 81);
6
6
  max-width: 80ch;
7
7
  flex-direction: column;
8
8
  align-items: stretch;
@@ -32,8 +32,8 @@
32
32
  &::after {
33
33
  pointer-events: none;
34
34
  position: sticky;
35
- bottom: calc(0.25rem * 0);
36
- left: calc(0.25rem * 0);
35
+ bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
36
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
37
37
  margin-top: calc(25px * -1);
38
38
  display: block;
39
39
  min-height: 25px;
@@ -53,15 +53,15 @@
53
53
  .ga-dropdown__item {
54
54
  position: relative;
55
55
  display: flex;
56
- height: calc(0.25rem * 9);
57
- min-width: calc(0.25rem * 0);
56
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 9);
57
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
58
58
  flex-shrink: 0;
59
59
  cursor: pointer;
60
60
  flex-direction: row;
61
61
  align-items: center;
62
- gap: calc(0.25rem * 2);
63
- padding-inline: calc(0.25rem * 3);
64
- padding-block: calc(0.25rem * 2);
62
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
63
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
64
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
65
65
  text-align: left;
66
66
  font-size: calc(
67
67
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -113,8 +113,8 @@
113
113
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
114
114
  &::after {
115
115
  position: absolute;
116
- top: calc(0.25rem * 0);
117
- left: calc(0.25rem * 0);
116
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
117
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
118
118
  height: 100%;
119
119
  width: 100%;
120
120
  border-radius: var(--ga-radius);
@@ -127,9 +127,9 @@
127
127
  }
128
128
  .ga-dropdown__caption {
129
129
  flex-shrink: 0;
130
- padding-inline: calc(0.25rem * 3);
131
- padding-top: calc(0.25rem * 3);
132
- padding-bottom: calc(0.25rem * 2);
130
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
131
+ padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
132
+ padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
133
133
  font-size: calc(
134
134
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
135
135
  );
@@ -142,9 +142,9 @@
142
142
  }
143
143
  .ga-dropdown__empty {
144
144
  margin-inline: auto;
145
- margin-block: calc(0.25rem * 5);
145
+ margin-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
146
146
  display: inline-flex;
147
- min-width: calc(0.25rem * 30);
147
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 30);
148
148
  justify-content: center;
149
149
  font-size: calc(
150
150
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
@@ -158,13 +158,13 @@
158
158
  }
159
159
  .ga-dropdown__spinner {
160
160
  margin-inline: auto;
161
- margin-block: calc(0.25rem * 5);
161
+ margin-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
162
162
  display: inline-flex;
163
- min-width: calc(0.25rem * 30);
163
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 30);
164
164
  justify-content: center;
165
165
  }
166
166
  .ga-dropdown__item-label {
167
- min-width: calc(0.25rem * 0);
167
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
168
168
  overflow: hidden;
169
169
  text-overflow: ellipsis;
170
170
  white-space: nowrap;
package/dist/components/form-field.css CHANGED
@@ -3,21 +3,21 @@
3
3
  .ga-form-field {
4
4
  display: flex;
5
5
  flex-direction: column;
6
- gap: calc(0.25rem * 2);
6
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
7
7
  > .ga-select, > .ga-input {
8
8
  width: 100%;
9
9
  flex-shrink: 0;
10
10
  }
11
11
  .ga-form-field__label {
12
12
  display: inline-flex;
13
- height: calc(0.25rem * 5);
13
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
14
14
  width: fit-content;
15
15
  max-width: 100%;
16
- min-width: calc(0.25rem * 0);
17
- gap: calc(0.25rem * 1);
18
- padding-inline: calc(0.25rem * 1);
19
- --tw-leading: calc(0.25rem * 5);
20
- line-height: calc(0.25rem * 5);
16
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
17
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
18
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
19
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
20
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
21
21
  &:focus-visible {
22
22
  border-radius: var(--ga-radius);
23
23
  outline-style: var(--tw-outline-style);
@@ -27,7 +27,7 @@
27
27
  }
28
28
  }
29
29
  .ga-form-field__label-text {
30
- min-width: calc(0.25rem * 0);
30
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
31
31
  overflow: hidden;
32
32
  text-overflow: ellipsis;
33
33
  white-space: nowrap;
@@ -80,8 +80,8 @@
80
80
  .ga-form-field__info {
81
81
  display: flex;
82
82
  align-items: flex-start;
83
- gap: calc(0.25rem * 1);
84
- padding-inline: calc(0.25rem * 1);
83
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
84
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
85
85
  font-size: calc(
86
86
  var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
87
87
  );
package/dist/components/input.css CHANGED
@@ -2,18 +2,18 @@
2
2
  @layer properties;
3
3
  .ga-input {
4
4
  display: flex;
5
- height: calc(0.25rem * 10);
6
- width: calc(0.25rem * 50);
5
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
6
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 50);
7
7
  flex-direction: row;
8
8
  align-items: center;
9
- gap: calc(0.25rem * 2);
9
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
10
10
  border-radius: var(--ga-radius);
11
11
  border-style: var(--tw-border-style);
12
12
  border-width: 1px;
13
13
  border-color: var(--ga-color-border-primary);
14
14
  background-color: var(--ga-color-surface-primary);
15
- padding-inline: calc(0.25rem * 3);
16
- padding-block: calc(0.25rem * 2);
15
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
16
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
17
17
  font-size: calc(
18
18
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
19
19
  );
@@ -71,15 +71,15 @@
71
71
  }
72
72
  }
73
73
  input, &:is(input) {
74
- min-width: calc(0.25rem * 0);
75
- --tw-leading: calc(0.25rem * 6);
76
- line-height: calc(0.25rem * 6);
74
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
75
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
76
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
77
77
  &::placeholder {
78
78
  color: var(--ga-color-text-disabled);
79
79
  }
80
80
  }
81
81
  input {
82
- height: calc(0.25rem * 6);
82
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
83
83
  width: 100%;
84
84
  --tw-outline-style: none;
85
85
  outline-style: none;
package/dist/components/link.css CHANGED
@@ -2,13 +2,13 @@
2
2
  @layer properties;
3
3
  .ga-link {
4
4
  display: inline-flex;
5
- height: calc(0.25rem * 5);
5
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
6
6
  cursor: pointer;
7
7
  align-items: center;
8
8
  justify-content: center;
9
- gap: calc(0.25rem * 1);
9
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
10
10
  border-radius: var(--ga-radius);
11
- padding-inline: calc(0.25rem * 0.5);
11
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
12
12
  vertical-align: middle;
13
13
  font-size: calc(
14
14
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -36,7 +36,7 @@
36
36
  text-decoration-thickness: 1px;
37
37
  }
38
38
  &.ga-link--small {
39
- height: calc(0.25rem * 4);
39
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
40
40
  font-size: calc(
41
41
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
42
42
  );
@@ -46,7 +46,7 @@
46
46
  letter-spacing: var(--tw-tracking, 0);
47
47
  }
48
48
  &.ga-link--large {
49
- height: calc(0.25rem * 6);
49
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
50
50
  font-size: calc(
51
51
  var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
52
52
  );