@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/tabs.css CHANGED
@@ -2,17 +2,17 @@
2
2
  @layer properties;
3
3
  .ga-tabs {
4
4
  display: flex;
5
- gap: calc(0.25rem * 2);
5
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
6
6
  &.ga-tabs--keyline {
7
7
  border-color: var(--ga-color-border-tertiary);
8
8
  }
9
9
  .ga-tabs__tab {
10
10
  position: relative;
11
11
  display: flex;
12
- height: calc(0.25rem * 8);
12
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
13
13
  cursor: pointer;
14
14
  align-items: center;
15
- gap: calc(0.25rem * 2);
15
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
16
16
  border-color: transparent;
17
17
  font-size: calc(
18
18
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -23,8 +23,8 @@
23
23
  letter-spacing: var(--tw-tracking, calc(
24
24
  var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
25
25
  ));
26
- --tw-leading: calc(0.25rem * 4);
27
- line-height: calc(0.25rem * 4);
26
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
27
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
28
28
  --tw-font-weight: 500;
29
29
  font-weight: 500;
30
30
  color: var(--ga-color-text-action);
@@ -61,7 +61,7 @@
61
61
  }
62
62
  &:focus-visible::after, &.ga-tabs__tab--focused::after {
63
63
  position: absolute;
64
- inset: calc(0.25rem * -1);
64
+ inset: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -1);
65
65
  border-radius: var(--ga-radius);
66
66
  border-style: var(--tw-border-style);
67
67
  border-width: 2px;
@@ -82,11 +82,11 @@
82
82
  .ga-tabs__tab {
83
83
  border-bottom-style: var(--tw-border-style);
84
84
  border-bottom-width: 4px;
85
- padding-inline: calc(0.25rem * 4);
86
- padding-top: calc(0.25rem * 2);
87
- padding-bottom: calc(0.25rem * 1);
85
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
86
+ padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
87
+ padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
88
88
  &:focus-visible::after, &.ga-tabs__tab--focused::after {
89
- bottom: calc(0.25rem * -2);
89
+ bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
90
90
  }
91
91
  }
92
92
  }
@@ -99,11 +99,11 @@
99
99
  .ga-tabs__tab {
100
100
  border-left-style: var(--tw-border-style);
101
101
  border-left-width: 4px;
102
- padding-block: calc(0.25rem * 2);
103
- padding-right: calc(0.25rem * 4);
104
- padding-left: calc(0.25rem * 3);
102
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
103
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
104
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
105
105
  &:focus-visible::after, &.ga-tabs__tab--focused::after {
106
- left: calc(0.25rem * -2);
106
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
107
107
  }
108
108
  }
109
109
  }
package/dist/components/tag.css CHANGED
@@ -3,16 +3,16 @@
3
3
  .ga-tag {
4
4
  box-sizing: content-box;
5
5
  display: inline-flex;
6
- height: calc(0.25rem * 6);
6
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
7
7
  flex-direction: row;
8
8
  align-items: center;
9
- gap: calc(0.25rem * 1);
9
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
10
10
  border-radius: calc(infinity * 1px);
11
11
  border-style: var(--tw-border-style);
12
12
  border-width: 1px;
13
13
  border-color: var(--ga-color-border-action);
14
- padding-right: calc(0.25rem * 1);
15
- padding-left: calc(0.25rem * 2);
14
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
15
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
16
16
  font-size: calc(
17
17
  var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
18
18
  );
@@ -120,7 +120,7 @@
120
120
  }
121
121
  &.ga-tag--utility-grey, &.ga-tag--utility-indigo, &.ga-tag--utility-teal, &.ga-tag--utility-lime, &.ga-tag--utility-purple, &.ga-tag--utility-pink, &.ga-tag--utility-rose, &.ga-tag--utility-blue, &.ga-tag--utility-green, &.ga-tag--utility-orange, &.ga-tag--utility-disabled {
122
122
  border-radius: var(--ga-radius);
123
- padding-left: calc(0.25rem * 1.5);
123
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
124
124
  .ga-tag__icon {
125
125
  color: var(--ga-color-text-body);
126
126
  }
@@ -178,10 +178,10 @@
178
178
  overflow: hidden;
179
179
  text-overflow: ellipsis;
180
180
  white-space: nowrap;
181
- padding-right: calc(0.25rem * 1);
181
+ padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
182
182
  }
183
183
  .ga-tag__separator {
184
- height: calc(0.25rem * 5);
184
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
185
185
  width: 1px;
186
186
  background-color: var(--ga-color-border-disabled);
187
187
  }
package/dist/components/text-area.css CHANGED
@@ -3,14 +3,14 @@
3
3
  textarea.ga-text-area {
4
4
  display: inline-flex;
5
5
  width: 100%;
6
- min-width: calc(0.25rem * 0);
6
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
7
7
  border-radius: var(--ga-radius);
8
8
  border-style: var(--tw-border-style);
9
9
  border-width: 1px;
10
10
  border-color: var(--ga-color-border-primary);
11
11
  background-color: var(--ga-color-surface-primary);
12
- padding-inline: calc(0.25rem * 3);
13
- padding-block: calc(0.25rem * 2);
12
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
13
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
14
14
  font-size: calc(
15
15
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
16
16
  );
@@ -20,8 +20,8 @@ textarea.ga-text-area {
20
20
  letter-spacing: var(--tw-tracking, calc(
21
21
  var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
22
22
  ));
23
- --tw-leading: calc(0.25rem * 6);
24
- line-height: calc(0.25rem * 6);
23
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
24
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
25
25
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
26
26
  transition-timing-function: var(--tw-ease, ease);
27
27
  transition-duration: var(--tw-duration, 0s);
package/dist/components/tooltip.css CHANGED
@@ -2,10 +2,10 @@
2
2
  @layer properties;
3
3
  .ga-tooltip {
4
4
  position: relative;
5
- max-width: calc(0.25rem * 100);
5
+ max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 100);
6
6
  border-radius: var(--ga-radius);
7
7
  background-color: var(--ga-color-surface-action-hover);
8
- padding: calc(0.25rem * 2);
8
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
9
9
  font-size: calc(
10
10
  var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
11
11
  );
@@ -27,19 +27,19 @@
27
27
  }
28
28
  }
29
29
  &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end {
30
- margin-bottom: calc(0.25rem * 2);
30
+ margin-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
31
31
  }
32
32
  &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end {
33
- margin-top: calc(0.25rem * 2);
33
+ margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
34
34
  }
35
35
  &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end {
36
- margin-right: calc(0.25rem * 2);
36
+ margin-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
37
37
  }
38
38
  &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
39
- margin-left: calc(0.25rem * 2);
39
+ margin-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
40
40
  }
41
41
  &.ga-tooltip--top-start::before, &.ga-tooltip--top-center::before, &.ga-tooltip--top-end::before {
42
- bottom: calc(0.25rem * -2);
42
+ bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
43
43
  border-inline-style: var(--tw-border-style);
44
44
  border-inline-width: 8px;
45
45
  border-top-style: var(--tw-border-style);
@@ -48,7 +48,7 @@
48
48
  border-top-color: var(--ga-color-surface-action-hover);
49
49
  }
50
50
  &.ga-tooltip--bottom-start::before, &.ga-tooltip--bottom-center::before, &.ga-tooltip--bottom-end::before {
51
- top: calc(0.25rem * -2);
51
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
52
52
  border-inline-style: var(--tw-border-style);
53
53
  border-inline-width: 8px;
54
54
  border-bottom-style: var(--tw-border-style);
@@ -57,7 +57,7 @@
57
57
  border-bottom-color: var(--ga-color-surface-action-hover);
58
58
  }
59
59
  &.ga-tooltip--top-start::before, &.ga-tooltip--bottom-start::before {
60
- left: calc(0.25rem * 4);
60
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
61
61
  }
62
62
  &.ga-tooltip--top-center::before, &.ga-tooltip--bottom-center::before {
63
63
  left: calc(1 / 2 * 100%);
@@ -65,10 +65,10 @@
65
65
  translate: var(--tw-translate-x) var(--tw-translate-y);
66
66
  }
67
67
  &.ga-tooltip--top-end::before, &.ga-tooltip--bottom-end::before {
68
- right: calc(0.25rem * 4);
68
+ right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
69
69
  }
70
70
  &.ga-tooltip--left-start::before, &.ga-tooltip--left-center::before, &.ga-tooltip--left-end::before {
71
- right: calc(0.25rem * -2);
71
+ right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
72
72
  border-block-style: var(--tw-border-style);
73
73
  border-block-width: 8px;
74
74
  border-left-style: var(--tw-border-style);
@@ -77,7 +77,7 @@
77
77
  border-left-color: var(--ga-color-surface-action-hover);
78
78
  }
79
79
  &.ga-tooltip--right-start::before, &.ga-tooltip--right-center::before, &.ga-tooltip--right-end::before {
80
- left: calc(0.25rem * -2);
80
+ left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
81
81
  border-block-style: var(--tw-border-style);
82
82
  border-block-width: 8px;
83
83
  border-right-style: var(--tw-border-style);
@@ -86,7 +86,7 @@
86
86
  border-right-color: var(--ga-color-surface-action-hover);
87
87
  }
88
88
  &.ga-tooltip--left-start::before, &.ga-tooltip--right-start::before {
89
- top: calc(0.25rem * 4);
89
+ top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
90
90
  }
91
91
  &.ga-tooltip--left-center::before, &.ga-tooltip--right-center::before {
92
92
  top: calc(1 / 2 * 100%);
@@ -94,10 +94,10 @@
94
94
  translate: var(--tw-translate-x) var(--tw-translate-y);
95
95
  }
96
96
  &.ga-tooltip--left-end::before, &.ga-tooltip--right-end::before {
97
- bottom: calc(0.25rem * 4);
97
+ bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
98
98
  }
99
99
  .ga-tooltip__title {
100
- margin-bottom: calc(0.25rem * 1);
100
+ margin-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
101
101
  --tw-font-weight: 600;
102
102
  font-weight: 600;
103
103
  }