@a-type/ui 6.0.13 → 6.0.14

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 (131) hide show
  1. package/dist/arbor/arbor.d.ts +72 -8
  2. package/dist/arbor/arbor.js +94 -8
  3. package/dist/arbor/arbor.js.map +1 -1
  4. package/dist/colors.module.css +4 -4
  5. package/dist/components/actions/ActionButton.module.css +1 -1
  6. package/dist/components/box/Box.module.css +10 -10
  7. package/dist/components/box/Box.stories.js +1 -1
  8. package/dist/components/box/Box.stories.js.map +1 -1
  9. package/dist/components/button/Button.js +1 -1
  10. package/dist/components/button/Button.js.map +1 -1
  11. package/dist/components/button/Button.module.css +5 -12
  12. package/dist/components/button/index.d.ts +0 -1
  13. package/dist/components/button/index.js +0 -1
  14. package/dist/components/button/index.js.map +1 -1
  15. package/dist/components/camera/Camera.module.css +7 -7
  16. package/dist/components/card/Card.module.css +23 -23
  17. package/dist/components/card/Card.stories.js +2 -2
  18. package/dist/components/card/Card.stories.js.map +1 -1
  19. package/dist/components/chip/Chip.module.css +4 -4
  20. package/dist/components/combobox/Combobox.module.css +25 -25
  21. package/dist/components/datePicker/Calendar.module.css +3 -3
  22. package/dist/components/datePicker/dateRangePicker.module.css +1 -1
  23. package/dist/components/dialog/Dialog.module.css +15 -15
  24. package/dist/components/editableText/EditableText.module.css +1 -1
  25. package/dist/components/emojiPicker/EmojiPicker.module.css +12 -12
  26. package/dist/components/forms/FieldLabel.module.css +8 -8
  27. package/dist/components/forms/Form.module.css +1 -1
  28. package/dist/components/forms/NumberStepperField.module.css +1 -1
  29. package/dist/components/forms/TextField.module.css +1 -1
  30. package/dist/components/horizontalList/HorizontalList.module.css +4 -4
  31. package/dist/components/icon/Icon.stories.js +2 -2
  32. package/dist/components/icon/Icon.stories.js.map +1 -1
  33. package/dist/components/imageUploader/ImageUploader.module.css +6 -6
  34. package/dist/components/input/Input.module.css +5 -5
  35. package/dist/components/layouts/PageContent.module.css +3 -3
  36. package/dist/components/layouts/PageFixedArea.module.css +1 -1
  37. package/dist/components/layouts/PageNav.module.css +3 -3
  38. package/dist/components/layouts/PageNowPlaying.module.css +3 -3
  39. package/dist/components/layouts/PageSection.module.css +2 -2
  40. package/dist/components/lightbox/Lightbox.module.css +3 -3
  41. package/dist/components/lists/lists.module.css +2 -2
  42. package/dist/components/navBar/NavBar.module.css +13 -13
  43. package/dist/components/note/Note.module.css +4 -4
  44. package/dist/components/peek/Peek.module.css +4 -4
  45. package/dist/components/popover/Popover.module.css +8 -8
  46. package/dist/components/popover/Popover.stories.js +1 -1
  47. package/dist/components/popover/Popover.stories.js.map +1 -1
  48. package/dist/components/primitives/menus.module.css +25 -27
  49. package/dist/components/progress/Progress.module.css +7 -7
  50. package/dist/components/pwaInstall/PwaInstall.module.css +3 -3
  51. package/dist/components/quickAction/QuickAction.module.css +1 -1
  52. package/dist/components/richEditor/richEditor.module.css +23 -23
  53. package/dist/components/select/Select.module.css +2 -2
  54. package/dist/components/spinner/Spinner.module.css +1 -1
  55. package/dist/components/switch/Switch.module.css +1 -1
  56. package/dist/components/tabs/tabs.module.css +6 -6
  57. package/dist/components/textArea/TextArea.module.css +1 -1
  58. package/dist/components/toasts/toasts.module.css +19 -19
  59. package/dist/components/toggleGroup/toggleGroup.module.css +1 -1
  60. package/dist/components/tooltip/Tooltip.module.css +1 -1
  61. package/dist/components/typography/typography.module.css +11 -11
  62. package/dist/components/viewport/Viewport.module.css +8 -8
  63. package/dist/css/arbor.css +388 -276
  64. package/dist/css/util.css +10 -10
  65. package/dist/keyboard.stories.js +1 -1
  66. package/dist/keyboard.stories.js.map +1 -1
  67. package/dist/shadows.stories.js +1 -1
  68. package/dist/shadows.stories.js.map +1 -1
  69. package/dist/theme.stories.module.css +1 -1
  70. package/package.json +3 -3
  71. package/src/arbor/arbor.ts +108 -10
  72. package/src/colors.module.css +4 -4
  73. package/src/components/actions/ActionButton.module.css +1 -1
  74. package/src/components/box/Box.module.css +10 -10
  75. package/src/components/box/Box.stories.tsx +1 -1
  76. package/src/components/button/Button.module.css +5 -12
  77. package/src/components/button/Button.tsx +1 -0
  78. package/src/components/button/index.ts +0 -1
  79. package/src/components/camera/Camera.module.css +7 -7
  80. package/src/components/card/Card.module.css +23 -23
  81. package/src/components/card/Card.stories.tsx +2 -2
  82. package/src/components/chip/Chip.module.css +4 -4
  83. package/src/components/combobox/Combobox.module.css +25 -25
  84. package/src/components/datePicker/Calendar.module.css +3 -3
  85. package/src/components/datePicker/dateRangePicker.module.css +1 -1
  86. package/src/components/dialog/Dialog.module.css +15 -15
  87. package/src/components/editableText/EditableText.module.css +1 -1
  88. package/src/components/emojiPicker/EmojiPicker.module.css +12 -12
  89. package/src/components/forms/FieldLabel.module.css +8 -8
  90. package/src/components/forms/Form.module.css +1 -1
  91. package/src/components/forms/NumberStepperField.module.css +1 -1
  92. package/src/components/forms/TextField.module.css +1 -1
  93. package/src/components/horizontalList/HorizontalList.module.css +4 -4
  94. package/src/components/icon/Icon.stories.tsx +2 -2
  95. package/src/components/imageUploader/ImageUploader.module.css +6 -6
  96. package/src/components/input/Input.module.css +5 -5
  97. package/src/components/layouts/PageContent.module.css +3 -3
  98. package/src/components/layouts/PageFixedArea.module.css +1 -1
  99. package/src/components/layouts/PageNav.module.css +3 -3
  100. package/src/components/layouts/PageNowPlaying.module.css +3 -3
  101. package/src/components/layouts/PageSection.module.css +2 -2
  102. package/src/components/lightbox/Lightbox.module.css +3 -3
  103. package/src/components/lists/lists.module.css +2 -2
  104. package/src/components/navBar/NavBar.module.css +13 -13
  105. package/src/components/note/Note.module.css +4 -4
  106. package/src/components/peek/Peek.module.css +4 -4
  107. package/src/components/popover/Popover.module.css +8 -8
  108. package/src/components/popover/Popover.stories.tsx +1 -1
  109. package/src/components/primitives/menus.module.css +25 -27
  110. package/src/components/progress/Progress.module.css +7 -7
  111. package/src/components/pwaInstall/PwaInstall.module.css +3 -3
  112. package/src/components/quickAction/QuickAction.module.css +1 -1
  113. package/src/components/richEditor/richEditor.module.css +23 -23
  114. package/src/components/select/Select.module.css +2 -2
  115. package/src/components/spinner/Spinner.module.css +1 -1
  116. package/src/components/switch/Switch.module.css +1 -1
  117. package/src/components/tabs/tabs.module.css +6 -6
  118. package/src/components/textArea/TextArea.module.css +1 -1
  119. package/src/components/toasts/toasts.module.css +19 -19
  120. package/src/components/toggleGroup/toggleGroup.module.css +1 -1
  121. package/src/components/tooltip/Tooltip.module.css +1 -1
  122. package/src/components/typography/typography.module.css +11 -11
  123. package/src/components/viewport/Viewport.module.css +8 -8
  124. package/src/css/util.css +10 -10
  125. package/src/keyboard.stories.tsx +1 -1
  126. package/src/shadows.stories.tsx +1 -1
  127. package/src/theme.stories.module.css +1 -1
  128. package/dist/components/button/classes.d.ts +0 -7
  129. package/dist/components/button/classes.js +0 -24
  130. package/dist/components/button/classes.js.map +0 -1
  131. package/src/components/button/classes.tsx +0 -79
package/dist/components/toasts/toasts.module.css CHANGED
@@ -4,8 +4,8 @@
4
4
  }
5
5
 
6
6
  .toast {
7
- --gap: var(--m-spacing-sm);
8
- --peek: var(--m-spacing-sm);
7
+ --gap: var(--m-space-sm);
8
+ --peek: var(--m-space-sm);
9
9
  --scale: calc(max(0, 1 - var(--toast-index) * 0.1));
10
10
  --height: var(--toast-frontmost-height, var(--toast-height));
11
11
  --shrink: calc(1 - var(--scale));
@@ -17,7 +17,7 @@
17
17
  /* basic positioning */
18
18
  position: fixed;
19
19
  left: auto;
20
- top: var(--m-spacing-xs);
20
+ top: var(--m-space-xs);
21
21
  z-index: calc(100000 - var(--toast-index));
22
22
  margin-right: 0;
23
23
  width: 100%;
@@ -27,7 +27,7 @@
27
27
  display: flex;
28
28
  flex-direction: column;
29
29
  align-items: center;
30
- gap: var(--m-spacing-xs);
30
+ gap: var(--m-space-xs);
31
31
 
32
32
  /* styling happens in content element */
33
33
 
@@ -100,7 +100,7 @@
100
100
  pointer-events: auto;
101
101
  display: flex;
102
102
  flex-direction: column;
103
- gap: var(--m-spacing-sm);
103
+ gap: var(--m-space-sm);
104
104
 
105
105
  &[data-behind]:not([data-expanded]) {
106
106
  pointer-events: none;
@@ -115,10 +115,10 @@
115
115
  @apply --mx-shadow(var(--m-shadow-md));
116
116
  @apply --mx-surface-secondary;
117
117
 
118
- padding-inline-start: var(--m-spacing-md);
119
- padding-inline-end: var(--m-spacing-sm);
120
- padding-block: var(--m-spacing-sm);
121
- gap: var(--m-spacing-sm);
118
+ padding-inline-start: var(--m-space-md);
119
+ padding-inline-end: var(--m-space-sm);
120
+ padding-block: var(--m-space-sm);
121
+ gap: var(--m-space-sm);
122
122
 
123
123
  [data-behind]:not([data-expanded]) & {
124
124
  max-height: var(--height);
@@ -130,7 +130,7 @@
130
130
  display: flex;
131
131
  flex-direction: row;
132
132
  align-items: center;
133
- gap: var(--m-spacing-xs);
133
+ gap: var(--m-space-xs);
134
134
  @apply --mx-fg(inherit);
135
135
 
136
136
  transition: opacity var(--m-duration) var(--m-easing);
@@ -148,20 +148,20 @@
148
148
  .toastMainBodyContent {
149
149
  display: flex;
150
150
  flex-direction: column;
151
- gap: var(--m-spacing-xs);
151
+ gap: var(--m-space-xs);
152
152
  @apply --mx-fg(inherit);
153
153
  }
154
154
 
155
155
  .toastTitle {
156
156
  @apply --mx-fg(inherit);
157
- @apply --mx-text-secondary;
158
- font-weight: var(--m-typography-weight-bold);
157
+ @apply --mx-prose-secondary;
158
+ font-weight: var(--m-text-weight-bold);
159
159
  margin: 0;
160
160
  }
161
161
 
162
162
  .toastDescriptionRow {
163
163
  display: flex;
164
- gap: var(--m-spacing-sm);
164
+ gap: var(--m-space-sm);
165
165
  }
166
166
 
167
167
  .icon {
@@ -172,7 +172,7 @@
172
172
  .toastDescription {
173
173
  margin: 0;
174
174
  @apply --mx-fg(inherit);
175
- @apply --mx-text-ambient;
175
+ @apply --mx-prose-ambient;
176
176
  }
177
177
 
178
178
  .toastClose {
@@ -187,11 +187,11 @@
187
187
  margin-inline-start: auto;
188
188
  display: flex;
189
189
  align-items: center;
190
- gap: var(--m-spacing-xs);
190
+ gap: var(--m-space-xs);
191
191
 
192
- font-size: var(--m-text-ambient-size);
193
- line-height: var(--m-text-ambient-lineHeight);
194
- font-weight: var(--m-text-ambient-weight);
192
+ font-size: var(--m-prose-ambient-size);
193
+ line-height: var(--m-prose-ambient-lineHeight);
194
+ font-weight: var(--m-prose-ambient-weight);
195
195
 
196
196
  transition: opacity var(--m-duration) var(--m-easing);
197
197
 
package/dist/components/toggleGroup/toggleGroup.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .root {
2
2
  width: fit-content;
3
3
  display: inline-flex;
4
- gap: var(--m-spacing-sm);
4
+ gap: var(--m-space-sm);
5
5
  border-radius: var(--m-radius-lg);
6
6
 
7
7
  @apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));
package/dist/components/tooltip/Tooltip.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  padding: var(--m-surface-padding);
7
7
  border-radius: var(--m-surface-radius);
8
8
 
9
- font-size: var(--m-text-ambient-size);
9
+ font-size: var(--m-prose-ambient-size);
10
10
 
11
11
  transition:
12
12
  opacity 0.2s ease,
package/dist/components/typography/typography.module.css CHANGED
@@ -1,19 +1,19 @@
1
1
  .typography {
2
2
  @apply --mx-fg(inherit);
3
- font-size: var(--m-text-secondary-size);
4
- line-height: var(--m-text-secondary-lineHeight);
5
- font-weight: var(--m-text-secondary-weight);
3
+ font-size: var(--m-prose-secondary-size);
4
+ line-height: var(--m-prose-secondary-lineHeight);
5
+ font-weight: var(--m-prose-secondary-weight);
6
6
 
7
7
  &[data-emphasis='primary'] {
8
- font-size: var(--m-text-primary-size);
9
- line-height: var(--m-text-primary-lineHeight);
10
- font-weight: var(--m-text-primary-weight);
8
+ font-size: var(--m-prose-primary-size);
9
+ line-height: var(--m-prose-primary-lineHeight);
10
+ font-weight: var(--m-prose-primary-weight);
11
11
  }
12
12
 
13
13
  &[data-emphasis='ambient'] {
14
- font-size: var(--m-text-ambient-size);
15
- line-height: var(--m-text-ambient-lineHeight);
16
- font-weight: var(--m-text-ambient-weight);
14
+ font-size: var(--m-prose-ambient-size);
15
+ line-height: var(--m-prose-ambient-lineHeight);
16
+ font-weight: var(--m-prose-ambient-weight);
17
17
  }
18
18
 
19
19
  &[data-italic] {
@@ -26,10 +26,10 @@
26
26
  text-decoration: line-through;
27
27
  }
28
28
  &[data-bold] {
29
- font-weight: var(--m-typography-weight-bold);
29
+ font-weight: var(--m-text-weight-bold);
30
30
  }
31
31
  &[data-thin] {
32
- font-weight: var(--m-typography-weight-thin);
32
+ font-weight: var(--m-text-weight-thin);
33
33
  }
34
34
  &[data-truncate] {
35
35
  overflow: hidden;
package/dist/components/viewport/Viewport.module.css CHANGED
@@ -26,19 +26,19 @@
26
26
  position: absolute;
27
27
 
28
28
  &[data-position='top-left'] {
29
- top: var(--m-spacing-sm);
30
- left: var(--m-spacing-sm);
29
+ top: var(--m-space-sm);
30
+ left: var(--m-space-sm);
31
31
  }
32
32
  &[data-position='top-right'] {
33
- top: var(--m-spacing-sm);
34
- right: var(--m-spacing-sm);
33
+ top: var(--m-space-sm);
34
+ right: var(--m-space-sm);
35
35
  }
36
36
  &[data-position='bottom-left'] {
37
- bottom: var(--m-spacing-sm);
38
- left: var(--m-spacing-sm);
37
+ bottom: var(--m-space-sm);
38
+ left: var(--m-space-sm);
39
39
  }
40
40
  &[data-position='bottom-right'] {
41
- bottom: var(--m-spacing-sm);
42
- right: var(--m-spacing-sm);
41
+ bottom: var(--m-space-sm);
42
+ right: var(--m-space-sm);
43
43
  }
44
44
  }