@gtivr4/a1-design-system-react 0.1.0 → 0.2.3

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 (108) hide show
  1. package/package.json +1 -1
  2. package/src/color-scheme.css +586 -24
  3. package/src/components/accordion/Accordion.jsx +80 -0
  4. package/src/components/accordion/accordion.css +118 -0
  5. package/src/components/banner/Banner.jsx +66 -0
  6. package/src/components/banner/banner.css +205 -0
  7. package/src/components/bleed/Bleed.jsx +27 -0
  8. package/src/components/bleed/bleed.css +5 -0
  9. package/src/components/blockquote/Blockquote.jsx +40 -0
  10. package/src/components/blockquote/blockquote.css +166 -0
  11. package/src/components/breadcrumb/Breadcrumb.jsx +82 -0
  12. package/src/components/breadcrumb/breadcrumb.css +133 -0
  13. package/src/components/button/button.css +42 -12
  14. package/src/components/button-container/ButtonContainer.jsx +20 -1
  15. package/src/components/button-container/button-container.css +19 -1
  16. package/src/components/calendar/Calendar.jsx +383 -0
  17. package/src/components/calendar/calendar.css +225 -0
  18. package/src/components/card/Card.jsx +50 -12
  19. package/src/components/card/card.css +178 -14
  20. package/src/components/checkbox-group/CheckboxGroup.jsx +120 -0
  21. package/src/components/checkbox-group/checkbox-group.css +304 -0
  22. package/src/components/cluster/Cluster.jsx +52 -0
  23. package/src/components/cluster/cluster.css +9 -0
  24. package/src/components/code/Code.jsx +135 -0
  25. package/src/components/code/code.css +60 -0
  26. package/src/components/data-table/DataTable.jsx +721 -0
  27. package/src/components/data-table/DataTableFilters.jsx +339 -0
  28. package/src/components/data-table/data-table-filters.css +259 -0
  29. package/src/components/data-table/data-table.css +425 -0
  30. package/src/components/dialog/Dialog.jsx +45 -2
  31. package/src/components/dialog/dialog.css +13 -4
  32. package/src/components/divider/Divider.jsx +64 -0
  33. package/src/components/divider/divider.css +170 -0
  34. package/src/components/field/CreditCardField.jsx +131 -0
  35. package/src/components/field/DateField.jsx +11 -0
  36. package/src/components/field/NumberField.jsx +11 -0
  37. package/src/components/field/PhoneField.jsx +107 -0
  38. package/src/components/field/SelectField.jsx +86 -0
  39. package/src/components/field/TextField.jsx +83 -0
  40. package/src/components/field/TextareaField.jsx +147 -0
  41. package/src/components/field/TimeField.jsx +11 -0
  42. package/src/components/field/ZipField.jsx +114 -0
  43. package/src/components/field/credit-card.css +30 -0
  44. package/src/components/field/field.css +380 -0
  45. package/src/components/field/textarea-field.css +185 -0
  46. package/src/components/field-row/FieldRow.jsx +23 -0
  47. package/src/components/field-row/field-row.css +51 -0
  48. package/src/components/fieldset/Fieldset.jsx +49 -0
  49. package/src/components/fieldset/fieldset.css +75 -0
  50. package/src/components/figure/Figure.jsx +63 -0
  51. package/src/components/figure/figure.css +97 -0
  52. package/src/components/grid/Grid.jsx +36 -2
  53. package/src/components/grid/grid.css +129 -4
  54. package/src/components/heading/Heading.jsx +41 -1
  55. package/src/components/heading/heading.css +65 -4
  56. package/src/components/icon/icon.css +1 -0
  57. package/src/components/icon-button/icon-button.css +1 -0
  58. package/src/components/inline/inline.css +51 -0
  59. package/src/components/inline-editable/InlineEditable.jsx +77 -0
  60. package/src/components/inline-editable/inline-editable.css +47 -0
  61. package/src/components/inset/Inset.jsx +27 -0
  62. package/src/components/inset/inset.css +6 -0
  63. package/src/components/labels/Labels.jsx +5 -5
  64. package/src/components/link/Link.jsx +2 -3
  65. package/src/components/link/link.css +30 -1
  66. package/src/components/list/List.jsx +92 -0
  67. package/src/components/list/list.css +178 -0
  68. package/src/components/menu/Menu.jsx +243 -10
  69. package/src/components/menu/menu.css +157 -17
  70. package/src/components/message/Message.jsx +25 -50
  71. package/src/components/message/message.css +50 -33
  72. package/src/components/notification/Notification.jsx +1 -1
  73. package/src/components/page-layout/PageLayout.jsx +16 -1
  74. package/src/components/page-layout/page-layout.css +97 -4
  75. package/src/components/page-nav/PageNav.jsx +110 -0
  76. package/src/components/page-nav/page-nav.css +167 -0
  77. package/src/components/paragraph/Paragraph.jsx +35 -2
  78. package/src/components/paragraph/paragraph.css +38 -1
  79. package/src/components/radio-group/RadioGroup.jsx +121 -0
  80. package/src/components/radio-group/radio-group.css +268 -0
  81. package/src/components/section/Section.jsx +108 -0
  82. package/src/components/section/section.css +280 -0
  83. package/src/components/segmented-control/SegmentedControl.jsx +4 -0
  84. package/src/components/segmented-control/segmented.css +13 -0
  85. package/src/components/side-nav/SideNav.jsx +29 -9
  86. package/src/components/side-nav/scrim.css +1 -1
  87. package/src/components/side-nav/side-nav.css +70 -32
  88. package/src/components/snackbar/Snackbar.jsx +56 -0
  89. package/src/components/snackbar/snackbar.css +113 -0
  90. package/src/components/spacer/Spacer.jsx +36 -0
  91. package/src/components/spacer/spacer.css +44 -0
  92. package/src/components/stack/Stack.jsx +100 -0
  93. package/src/components/stack/stack.css +37 -0
  94. package/src/components/switch/Switch.jsx +114 -0
  95. package/src/components/switch/switch.css +276 -0
  96. package/src/components/system-banner/SystemBanner.jsx +57 -0
  97. package/src/components/system-banner/system-banner.css +118 -0
  98. package/src/components/tabs/Tabs.jsx +96 -28
  99. package/src/components/tabs/tabs.css +352 -15
  100. package/src/components/token-select/TokenSelect.jsx +159 -0
  101. package/src/components/token-select/token-select.css +110 -0
  102. package/src/components/top-header/TopHeader.jsx +641 -0
  103. package/src/components/top-header/top-header.css +337 -0
  104. package/src/illustrations/ComponentThumbnails.jsx +227 -0
  105. package/src/index.js +41 -5
  106. package/src/themes.css +256 -5
  107. package/src/utilities/spacing.css +8 -0
  108. package/src/utilities/sr-only.css +16 -0
package/src/themes.css CHANGED
@@ -14,7 +14,7 @@ body, .a1-inverse {
14
14
 
15
15
 
16
16
  /* ────────────────────────────────────────────────────────────
17
- A1 Light
17
+ Base
18
18
  Default A1 theme tokens. No runtime selector is required because these values compile to :root.
19
19
  ──────────────────────────────────────────────────────────── */
20
20
 
@@ -24,7 +24,34 @@ body, .a1-inverse {
24
24
  Larger font sizes and filled icons for improved legibility. Apply .a1-theme-accessible to <html>.
25
25
  ──────────────────────────────────────────────────────────── */
26
26
 
27
- .a1-theme-accessible {
27
+ html.a1-theme-accessible {
28
+ --base-color-accent-400: #1D68E5;
29
+ --base-color-accent-500: #1250C4;
30
+ --base-color-accent-600: #0C3DA0;
31
+ --semantic-color-border-subtle: var(--base-color-neutral-400);
32
+ --semantic-color-border-default: var(--base-color-neutral-500);
33
+ --component-button-secondary-border: var(--base-color-accent-700);
34
+ --component-button-secondary-border-hover: var(--base-color-accent-700);
35
+ --component-button-secondary-border-pressed: var(--base-color-accent-800);
36
+ --component-button-tertiary-border: var(--base-color-neutral-400);
37
+ --component-button-tertiary-border-hover: var(--base-color-neutral-500);
38
+ --component-button-tertiary-border-pressed: var(--base-color-neutral-500);
39
+ --component-button-secondary-border-width: 2px;
40
+ --component-button-tertiary-border-width: 2px;
41
+ --component-button-large-secondary-border-width: 3px;
42
+ --component-card-border-width: 2px;
43
+ --component-data-table-border-width: 2px;
44
+ --component-dialog-border-width: 2px;
45
+ --component-dialog-footer-border-width: 2px;
46
+ --component-field-border-width: 2px;
47
+ --component-menu-border-width: 2px;
48
+ --component-message-banner-border-width: 2px;
49
+ --component-message-badge-border-width: 2px;
50
+ --component-pagination-border-width: 2px;
51
+ --component-segmented-border-width: 2px;
52
+ --component-side-nav-border-width: 2px;
53
+ --component-tab-border-width: 2px;
54
+ --component-top-header-border-width: 2px;
28
55
  --component-button-font-family: var(--theme-a1-accessible-font-family-body);
29
56
  --component-paragraph-font-family: var(--theme-a1-accessible-font-family-body);
30
57
  --component-heading-font-family-heading: var(--theme-a1-accessible-font-family-heading);
@@ -47,6 +74,221 @@ body, .a1-inverse {
47
74
  --semantic-font-size-display-jumbo: var(--theme-a1-accessible-font-size-display-jumbo);
48
75
  --semantic-font-size-display-x-jumbo: var(--theme-a1-accessible-font-size-display-x-jumbo);
49
76
  --a1-icon-fill: 1;
77
+ --base-radius-control: 10px;
78
+ --base-radius-lg: 14px;
79
+ --base-radius-xl: 20px;
80
+ --component-button-border-radius: 10px;
81
+ --component-card-border-radius: 14px;
82
+ --component-dialog-border-radius: 20px;
83
+ --component-icon-button-border-radius: 10px;
84
+ --component-message-banner-border-radius: 14px;
85
+ --component-message-badge-border-radius: 10px;
86
+ --component-side-nav-item-border-radius: 10px;
87
+ }
88
+
89
+ html.a1-theme-accessible.a1-theme-light, html.a1-theme-light.a1-theme-accessible {
90
+ --semantic-color-status-success-background: var(--base-color-success-700);
91
+ --semantic-color-status-success-foreground: var(--base-color-success-0);
92
+ }
93
+
94
+
95
+ /* ────────────────────────────────────────────────────────────
96
+ CatLympics
97
+ Playful, pastel, bouncy theme for CatLympics Game. Apply .a1-theme-catlympics to <html>.
98
+ ──────────────────────────────────────────────────────────── */
99
+
100
+ html.a1-theme-catlympics {
101
+ color-scheme: light;
102
+ --base-color-neutral-0: #fffdfb;
103
+ --base-color-neutral-50: #fff7f2;
104
+ --base-color-neutral-100: #fff0e7;
105
+ --base-color-neutral-200: #fce0d0;
106
+ --base-color-neutral-300: #f6c8b6;
107
+ --base-color-neutral-400: #eaa48b;
108
+ --base-color-neutral-500: #d08060;
109
+ --base-color-neutral-600: #a05542;
110
+ --base-color-neutral-700: #6b3829;
111
+ --base-color-neutral-800: #3b2012;
112
+ --base-color-neutral-900: #1a0f07;
113
+ --base-color-neutral-1000: #000000;
114
+ --base-color-accent-0: #fff6ff;
115
+ --base-color-accent-50: #ffeaf9;
116
+ --base-color-accent-100: #ffd5f0;
117
+ --base-color-accent-200: #ffb3e0;
118
+ --base-color-accent-300: #ff87cc;
119
+ --base-color-accent-400: #ff5fb8;
120
+ --base-color-accent-500: #ff3fa6;
121
+ --base-color-accent-600: #e03595;
122
+ --base-color-accent-700: #b1226a;
123
+ --base-color-accent-800: #7f1544;
124
+ --base-color-accent-900: #4c0a28;
125
+ --base-color-accent-1000: #120006;
126
+ --base-color-error-0: #fff6f7;
127
+ --base-color-error-50: #ffecef;
128
+ --base-color-error-100: #ffd0d9;
129
+ --base-color-error-200: #ffb0c0;
130
+ --base-color-error-300: #ff8698;
131
+ --base-color-error-400: #ff5a74;
132
+ --base-color-error-500: #ff3259;
133
+ --base-color-error-600: #d01f47;
134
+ --base-color-error-700: #9a1430;
135
+ --base-color-error-800: #61101f;
136
+ --base-color-error-900: #2f070d;
137
+ --base-color-error-1000: #070001;
138
+ --base-color-warn-0: #fffaf0;
139
+ --base-color-warn-50: #fff3d6;
140
+ --base-color-warn-100: #ffe6b3;
141
+ --base-color-warn-200: #ffd27a;
142
+ --base-color-warn-300: #ffc548;
143
+ --base-color-warn-400: #ffb51a;
144
+ --base-color-warn-500: #ff9f00;
145
+ --base-color-warn-600: #d07e00;
146
+ --base-color-warn-700: #9a5600;
147
+ --base-color-warn-800: #623400;
148
+ --base-color-warn-900: #341900;
149
+ --base-color-warn-1000: #0a0500;
150
+ --base-color-success-0: #effef6;
151
+ --base-color-success-50: #dcfceb;
152
+ --base-color-success-100: #bdf9da;
153
+ --base-color-success-200: #85f4bb;
154
+ --base-color-success-300: #43ef96;
155
+ --base-color-success-400: #12ca6b;
156
+ --base-color-success-500: #0c8848;
157
+ --base-color-success-600: #0a6e3a;
158
+ --base-color-success-700: #07532c;
159
+ --base-color-success-800: #05381e;
160
+ --base-color-success-900: #031e10;
161
+ --base-color-success-1000: #010c06;
162
+ --semantic-color-text-default: var(--base-color-neutral-900);
163
+ --semantic-color-text-muted: var(--base-color-neutral-700);
164
+ --semantic-color-text-inverse: var(--base-color-neutral-0);
165
+ --semantic-color-text-accent: var(--base-color-accent-700);
166
+ --semantic-color-surface-page: var(--base-color-neutral-0);
167
+ --semantic-color-surface-panel: var(--base-color-neutral-50);
168
+ --semantic-color-surface-raised: var(--base-color-neutral-100);
169
+ --semantic-color-border-subtle: var(--base-color-neutral-200);
170
+ --semantic-color-border-default: var(--base-color-neutral-300);
171
+ --semantic-color-border-strong: var(--base-color-neutral-500);
172
+ --semantic-color-action-background: var(--base-color-accent-500);
173
+ --semantic-color-action-background-hover: var(--base-color-accent-400);
174
+ --semantic-color-action-background-pressed: var(--base-color-accent-700);
175
+ --semantic-color-action-foreground: var(--base-color-neutral-900);
176
+ --semantic-color-action-foreground-pressed: var(--base-color-neutral-0);
177
+ --semantic-color-action-surface: var(--base-color-accent-50);
178
+ --semantic-color-action-border: var(--base-color-accent-300);
179
+ --semantic-color-status-error-background: var(--base-color-error-600);
180
+ --semantic-color-status-error-surface: var(--base-color-error-50);
181
+ --semantic-color-status-error-border: var(--base-color-error-300);
182
+ --semantic-color-status-error-foreground: var(--base-color-error-0);
183
+ --semantic-color-status-warn-background: var(--base-color-warn-500);
184
+ --semantic-color-status-warn-surface: var(--base-color-warn-50);
185
+ --semantic-color-status-warn-border: var(--base-color-warn-300);
186
+ --semantic-color-status-warn-foreground: var(--base-color-warn-0);
187
+ --semantic-color-status-success-background: var(--base-color-success-500);
188
+ --semantic-color-status-success-surface: var(--base-color-success-50);
189
+ --semantic-color-status-success-border: var(--base-color-success-300);
190
+ --semantic-color-status-success-foreground: var(--base-color-success-0);
191
+ --component-button-primary-background: var(--base-color-accent-400);
192
+ --component-button-primary-background-hover: var(--base-color-accent-300);
193
+ --component-button-primary-background-pressed: var(--base-color-accent-200);
194
+ --component-button-primary-foreground: var(--base-color-accent-900);
195
+ --component-button-primary-foreground-hover: var(--base-color-neutral-900);
196
+ --component-button-primary-foreground-pressed: var(--base-color-neutral-900);
197
+ --component-button-primary-border: var(--semantic-color-action-background);
198
+ --component-button-secondary-background: var(--base-color-accent-50);
199
+ --component-button-secondary-background-hover: var(--base-color-accent-100);
200
+ --component-button-secondary-background-pressed: var(--base-color-accent-200);
201
+ --component-button-secondary-foreground: var(--base-color-accent-800);
202
+ --component-button-secondary-foreground-hover: var(--base-color-accent-700);
203
+ --component-button-secondary-foreground-pressed: var(--base-color-accent-600);
204
+ --component-button-secondary-border: var(--base-color-accent-800);
205
+ --component-button-tertiary-background: var(--base-color-accent-50);
206
+ --component-button-tertiary-background-hover: var(--base-color-accent-50);
207
+ --component-button-tertiary-background-pressed: var(--base-color-accent-100);
208
+ --component-button-tertiary-foreground: var(--base-color-accent-700);
209
+ --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
210
+ --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
211
+ --component-button-tertiary-border: var(--base-color-accent-50);
212
+ --component-button-focus-ring: var(--base-color-accent-500);
213
+ --component-button-secondary-border-width: 3px;
214
+ --component-button-tertiary-border-width: 2px;
215
+ --component-button-box-shadow: 4px 4px 0 var(--base-color-accent-800);
216
+ --component-button-box-shadow-hover: 6px 6px 0 var(--base-color-accent-800);
217
+ --component-button-box-shadow-active: 0 0 0 var(--base-color-accent-800);
218
+ --component-button-press-transform: translate(4px, 4px);
219
+ --base-radius-control: 10px;
220
+ --base-radius-lg: 20px;
221
+ --base-radius-xl: 32px;
222
+ --component-button-border-radius: 16px;
223
+ --component-button-small-border-radius: 8px;
224
+ --component-button-large-border-radius: 24px;
225
+ --component-card-border-radius: 16px;
226
+ --component-dialog-border-radius: 20px;
227
+ --component-icon-button-border-radius: 10px;
228
+ --component-message-banner-border-radius: 12px;
229
+ --component-message-badge-border-radius: 10px;
230
+ --component-side-nav-item-border-radius: 12px;
231
+ --component-button-font-family: var(--theme-a1-catlympics-font-family-body);
232
+ --component-paragraph-font-family: var(--theme-a1-catlympics-font-family-body);
233
+ --component-heading-font-family-heading: var(--theme-a1-catlympics-font-family-heading);
234
+ --component-heading-font-family-display: var(--theme-a1-catlympics-font-family-display);
235
+ --semantic-font-weight-body: var(--theme-a1-catlympics-font-weight-body);
236
+ --semantic-font-weight-heading: var(--theme-a1-catlympics-font-weight-heading);
237
+ --semantic-font-weight-display: var(--theme-a1-catlympics-font-weight-display);
238
+ --component-paragraph-font-weight: var(--theme-a1-catlympics-font-weight-body);
239
+ --component-heading-font-weight-heading: var(--theme-a1-catlympics-font-weight-heading);
240
+ --component-heading-font-weight-display: var(--theme-a1-catlympics-font-weight-display);
241
+ --a1-icon-font-family: 'Material Symbols Rounded';
242
+ --a1-icon-weight: 600;
243
+ }
244
+
245
+ html.a1-theme-catlympics.a1-theme-light, html.a1-theme-light.a1-theme-catlympics, html.a1-theme-catlympics.a1-theme-dark, html.a1-theme-dark.a1-theme-catlympics {
246
+ color-scheme: light;
247
+ --semantic-color-text-default: var(--base-color-neutral-900);
248
+ --semantic-color-text-muted: var(--base-color-neutral-700);
249
+ --semantic-color-text-inverse: var(--base-color-neutral-0);
250
+ --semantic-color-text-accent: var(--base-color-accent-700);
251
+ --semantic-color-surface-page: var(--base-color-neutral-0);
252
+ --semantic-color-surface-panel: var(--base-color-neutral-50);
253
+ --semantic-color-surface-raised: var(--base-color-neutral-100);
254
+ --semantic-color-border-subtle: var(--base-color-neutral-200);
255
+ --semantic-color-border-default: var(--base-color-neutral-300);
256
+ --semantic-color-border-strong: var(--base-color-neutral-500);
257
+ --semantic-color-action-background: var(--base-color-accent-500);
258
+ --semantic-color-action-background-hover: var(--base-color-accent-400);
259
+ --semantic-color-action-background-pressed: var(--base-color-accent-700);
260
+ --semantic-color-action-foreground: var(--base-color-neutral-900);
261
+ --semantic-color-action-foreground-pressed: var(--base-color-neutral-0);
262
+ --semantic-color-action-surface: var(--base-color-accent-50);
263
+ --semantic-color-action-border: var(--base-color-accent-300);
264
+ --component-button-primary-background: var(--base-color-accent-400);
265
+ --component-button-primary-background-hover: var(--base-color-accent-300);
266
+ --component-button-primary-background-pressed: var(--base-color-accent-200);
267
+ --component-button-primary-foreground: var(--base-color-accent-900);
268
+ --component-button-primary-foreground-hover: var(--base-color-neutral-900);
269
+ --component-button-primary-foreground-pressed: var(--base-color-neutral-900);
270
+ --component-button-primary-border: var(--semantic-color-action-background);
271
+ --component-button-secondary-background: var(--base-color-accent-50);
272
+ --component-button-secondary-background-hover: var(--base-color-accent-100);
273
+ --component-button-secondary-background-pressed: var(--base-color-accent-200);
274
+ --component-button-secondary-foreground: var(--base-color-accent-800);
275
+ --component-button-secondary-foreground-hover: var(--base-color-accent-700);
276
+ --component-button-secondary-foreground-pressed: var(--base-color-accent-600);
277
+ --component-button-secondary-border: var(--base-color-accent-800);
278
+ --component-button-tertiary-background: var(--base-color-accent-50);
279
+ --component-button-tertiary-background-hover: var(--base-color-accent-50);
280
+ --component-button-tertiary-background-pressed: var(--base-color-accent-100);
281
+ --component-button-tertiary-foreground: var(--base-color-accent-700);
282
+ --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
283
+ --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
284
+ --component-button-tertiary-border: var(--base-color-accent-50);
285
+ --a1-field-hover-background: var(--base-color-neutral-50);
286
+ --a1-field-hover-border-color: var(--base-color-neutral-600);
287
+ --a1-field-active-background: var(--base-color-neutral-100);
288
+ --a1-field-active-border-color: var(--base-color-neutral-700);
289
+ --a1-field-read-only-background: var(--base-color-neutral-50);
290
+ --a1-field-read-only-border-color: var(--base-color-neutral-200);
291
+ --a1-field-read-only-text: var(--base-color-neutral-900);
50
292
  }
51
293
 
52
294
 
@@ -55,7 +297,7 @@ body, .a1-inverse {
55
297
  A warm neutral theme with deep teal actions, earthy red errors, burnt orange warnings, botanical green success, and Google Fonts-backed editorial typography. Apply .a1-theme-heritage to <html>.
56
298
  ──────────────────────────────────────────────────────────── */
57
299
 
58
- .a1-theme-heritage {
300
+ html.a1-theme-heritage {
59
301
  --base-color-neutral-0: #fffdf8;
60
302
  --base-color-neutral-50: #f8f3ea;
61
303
  --base-color-neutral-100: #eee5d8;
@@ -117,13 +359,12 @@ body, .a1-inverse {
117
359
  --base-color-success-900: #041108;
118
360
  --base-color-success-1000: #000100;
119
361
  --semantic-color-text-default: var(--base-color-neutral-900);
120
- --semantic-color-text-muted: var(--base-color-neutral-600);
362
+ --semantic-color-text-muted: var(--base-color-neutral-800);
121
363
  --semantic-color-text-inverse: var(--base-color-neutral-0);
122
364
  --semantic-color-text-accent: var(--base-color-accent-600);
123
365
  --semantic-color-surface-page: var(--base-color-neutral-0);
124
366
  --semantic-color-surface-panel: var(--base-color-neutral-50);
125
367
  --semantic-color-surface-raised: var(--base-color-neutral-100);
126
- --semantic-color-surface-inverse: var(--base-color-neutral-900);
127
368
  --semantic-color-border-subtle: var(--base-color-neutral-200);
128
369
  --semantic-color-border-default: var(--base-color-neutral-300);
129
370
  --semantic-color-border-strong: var(--base-color-neutral-500);
@@ -172,6 +413,16 @@ body, .a1-inverse {
172
413
  --component-button-tertiary-border-hover: var(--base-color-accent-50);
173
414
  --component-button-tertiary-border-pressed: var(--base-color-accent-100);
174
415
  --component-button-focus-ring: var(--base-color-accent-300);
416
+ --base-radius-control: 2px;
417
+ --base-radius-lg: 3px;
418
+ --base-radius-xl: 4px;
419
+ --component-button-border-radius: 2px;
420
+ --component-card-border-radius: 3px;
421
+ --component-dialog-border-radius: 4px;
422
+ --component-icon-button-border-radius: 2px;
423
+ --component-message-banner-border-radius: 3px;
424
+ --component-message-badge-border-radius: 2px;
425
+ --component-side-nav-item-border-radius: 2px;
175
426
  --component-button-font-family: var(--theme-a1-heritage-font-family-body);
176
427
  --component-paragraph-font-family: var(--theme-a1-heritage-font-family-body);
177
428
  --component-heading-font-family-heading: var(--theme-a1-heritage-font-family-heading);
package/src/utilities/spacing.css CHANGED
@@ -228,3 +228,11 @@
228
228
  .a1-my-64 { margin-top: var(--base-spacing-64); margin-bottom: var(--base-spacing-64); }
229
229
  .a1-my-96 { margin-top: var(--base-spacing-96); margin-bottom: var(--base-spacing-96); }
230
230
  .a1-my-128 { margin-top: var(--base-spacing-128); margin-bottom: var(--base-spacing-128); }
231
+
232
+ /* ── Gap utilities ─────────────────────────────────────────────────────────
233
+ Apply to flex or grid containers. Values map to semantic t-shirt sizes,
234
+ which are backed by foundational spacing tokens. */
235
+ .a1-gap-xs { gap: var(--semantic-spacing-gap-xs); }
236
+ .a1-gap-sm { gap: var(--semantic-spacing-gap-sm); }
237
+ .a1-gap-md { gap: var(--semantic-spacing-gap-md); }
238
+ .a1-gap-lg { gap: var(--semantic-spacing-gap-lg); }
package/src/utilities/sr-only.css ADDED
@@ -0,0 +1,16 @@
1
+ /* ══════════════════════════════════════════════════════════════════════════
2
+ Screen-reader only
3
+ Visually hidden but accessible to assistive technology.
4
+ ══════════════════════════════════════════════════════════════════════════ */
5
+
6
+ .a1-sr-only {
7
+ position: absolute;
8
+ width: 1px;
9
+ height: 1px;
10
+ padding: 0;
11
+ margin: -1px;
12
+ overflow: hidden;
13
+ clip: rect(0, 0, 0, 0);
14
+ white-space: nowrap;
15
+ border: 0;
16
+ }