@gtivr4/a1-design-system-react 0.1.0

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 (45) hide show
  1. package/README.md +32 -0
  2. package/package.json +40 -0
  3. package/src/color-scheme.css +213 -0
  4. package/src/components/button/Button.jsx +45 -0
  5. package/src/components/button/button.css +135 -0
  6. package/src/components/button-container/ButtonContainer.jsx +27 -0
  7. package/src/components/button-container/button-container.css +38 -0
  8. package/src/components/card/Card.jsx +29 -0
  9. package/src/components/card/card.css +37 -0
  10. package/src/components/dialog/Dialog.jsx +44 -0
  11. package/src/components/dialog/dialog.css +58 -0
  12. package/src/components/grid/Grid.jsx +77 -0
  13. package/src/components/grid/grid.css +86 -0
  14. package/src/components/heading/Heading.jsx +69 -0
  15. package/src/components/heading/heading.css +76 -0
  16. package/src/components/icon/Icon.jsx +32 -0
  17. package/src/components/icon/icon.css +10 -0
  18. package/src/components/icon-button/IconButton.jsx +34 -0
  19. package/src/components/icon-button/icon-button.css +196 -0
  20. package/src/components/inverse/Inverse.jsx +18 -0
  21. package/src/components/labels/Labels.jsx +29 -0
  22. package/src/components/link/Link.jsx +41 -0
  23. package/src/components/link/link.css +50 -0
  24. package/src/components/menu/Menu.jsx +45 -0
  25. package/src/components/menu/menu.css +45 -0
  26. package/src/components/message/Message.jsx +103 -0
  27. package/src/components/message/message.css +226 -0
  28. package/src/components/notification/Notification.jsx +55 -0
  29. package/src/components/notification/notification.css +69 -0
  30. package/src/components/page-layout/PageLayout.jsx +40 -0
  31. package/src/components/page-layout/page-layout.css +61 -0
  32. package/src/components/pagination/Pagination.jsx +64 -0
  33. package/src/components/pagination/pagination.css +85 -0
  34. package/src/components/paragraph/Paragraph.jsx +26 -0
  35. package/src/components/paragraph/paragraph.css +16 -0
  36. package/src/components/segmented-control/SegmentedControl.jsx +77 -0
  37. package/src/components/segmented-control/segmented.css +76 -0
  38. package/src/components/side-nav/SideNav.jsx +208 -0
  39. package/src/components/side-nav/scrim.css +17 -0
  40. package/src/components/side-nav/side-nav.css +283 -0
  41. package/src/components/tabs/Tabs.jsx +102 -0
  42. package/src/components/tabs/tabs.css +135 -0
  43. package/src/index.js +20 -0
  44. package/src/themes.css +186 -0
  45. package/src/utilities/spacing.css +230 -0
package/src/themes.css ADDED
@@ -0,0 +1,186 @@
1
+ /* Generated from system theme folders — do not edit directly.
2
+ To update: edit the JSON files, then run: npm run build:themes */
3
+
4
+ /* ────────────────────────────────────────────────────────────
5
+ Base
6
+ Global baseline — ensures body and .a1-inverse paint their background from the active surface token.
7
+ ──────────────────────────────────────────────────────────── */
8
+
9
+ body, .a1-inverse {
10
+ background: var(--semantic-color-surface-page, #ffffff);
11
+ color: var(--semantic-color-text-default);
12
+ transition: background var(--semantic-motion-duration-fast, 0.1s), color var(--semantic-motion-duration-fast, 0.1s);
13
+ }
14
+
15
+
16
+ /* ────────────────────────────────────────────────────────────
17
+ A1 Light
18
+ Default A1 theme tokens. No runtime selector is required because these values compile to :root.
19
+ ──────────────────────────────────────────────────────────── */
20
+
21
+
22
+ /* ────────────────────────────────────────────────────────────
23
+ Accessible
24
+ Larger font sizes and filled icons for improved legibility. Apply .a1-theme-accessible to <html>.
25
+ ──────────────────────────────────────────────────────────── */
26
+
27
+ .a1-theme-accessible {
28
+ --component-button-font-family: var(--theme-a1-accessible-font-family-body);
29
+ --component-paragraph-font-family: var(--theme-a1-accessible-font-family-body);
30
+ --component-heading-font-family-heading: var(--theme-a1-accessible-font-family-heading);
31
+ --component-heading-font-family-display: var(--theme-a1-accessible-font-family-display);
32
+ --semantic-font-size-body-xs: var(--theme-a1-accessible-font-size-body-xs);
33
+ --semantic-font-size-body-sm: var(--theme-a1-accessible-font-size-body-sm);
34
+ --semantic-font-size-body-md: var(--theme-a1-accessible-font-size-body-md);
35
+ --semantic-font-size-body-lg: var(--theme-a1-accessible-font-size-body-lg);
36
+ --semantic-font-size-body-xl: var(--theme-a1-accessible-font-size-body-xl);
37
+ --semantic-font-size-heading-xs: var(--theme-a1-accessible-font-size-heading-xs);
38
+ --semantic-font-size-heading-sm: var(--theme-a1-accessible-font-size-heading-sm);
39
+ --semantic-font-size-heading-md: var(--theme-a1-accessible-font-size-heading-md);
40
+ --semantic-font-size-heading-lg: var(--theme-a1-accessible-font-size-heading-lg);
41
+ --semantic-font-size-heading-xl: var(--theme-a1-accessible-font-size-heading-xl);
42
+ --semantic-font-size-display-sm: var(--theme-a1-accessible-font-size-display-sm);
43
+ --semantic-font-size-display-md: var(--theme-a1-accessible-font-size-display-md);
44
+ --semantic-font-size-display-lg: var(--theme-a1-accessible-font-size-display-lg);
45
+ --semantic-font-size-display-xl: var(--theme-a1-accessible-font-size-display-xl);
46
+ --semantic-font-size-display-xxl: var(--theme-a1-accessible-font-size-display-xxl);
47
+ --semantic-font-size-display-jumbo: var(--theme-a1-accessible-font-size-display-jumbo);
48
+ --semantic-font-size-display-x-jumbo: var(--theme-a1-accessible-font-size-display-x-jumbo);
49
+ --a1-icon-fill: 1;
50
+ }
51
+
52
+
53
+ /* ────────────────────────────────────────────────────────────
54
+ Heritage
55
+ 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
+ ──────────────────────────────────────────────────────────── */
57
+
58
+ .a1-theme-heritage {
59
+ --base-color-neutral-0: #fffdf8;
60
+ --base-color-neutral-50: #f8f3ea;
61
+ --base-color-neutral-100: #eee5d8;
62
+ --base-color-neutral-200: #dccfbd;
63
+ --base-color-neutral-300: #c4b39e;
64
+ --base-color-neutral-400: #a9957d;
65
+ --base-color-neutral-500: #8a765f;
66
+ --base-color-neutral-600: #62513f;
67
+ --base-color-neutral-700: #403326;
68
+ --base-color-neutral-800: #251b13;
69
+ --base-color-neutral-900: #130c07;
70
+ --base-color-neutral-1000: #000000;
71
+ --base-color-accent-0: #f7fffd;
72
+ --base-color-accent-50: #e6f7f3;
73
+ --base-color-accent-100: #ccece6;
74
+ --base-color-accent-200: #9ed9cf;
75
+ --base-color-accent-300: #68bdae;
76
+ --base-color-accent-400: #2e9889;
77
+ --base-color-accent-500: #006c67;
78
+ --base-color-accent-600: #00514e;
79
+ --base-color-accent-700: #003936;
80
+ --base-color-accent-800: #002522;
81
+ --base-color-accent-900: #001412;
82
+ --base-color-accent-1000: #000202;
83
+ --base-color-error-0: #fffaf7;
84
+ --base-color-error-50: #fbeee7;
85
+ --base-color-error-100: #f4d8cc;
86
+ --base-color-error-200: #e9b6a5;
87
+ --base-color-error-300: #d98b78;
88
+ --base-color-error-400: #c25f4d;
89
+ --base-color-error-500: #9f3f32;
90
+ --base-color-error-600: #74291f;
91
+ --base-color-error-700: #511910;
92
+ --base-color-error-800: #330d08;
93
+ --base-color-error-900: #1b0503;
94
+ --base-color-error-1000: #020000;
95
+ --base-color-warn-0: #fffaf3;
96
+ --base-color-warn-50: #faecd7;
97
+ --base-color-warn-100: #f2d5aa;
98
+ --base-color-warn-200: #e4b573;
99
+ --base-color-warn-300: #cf8f3f;
100
+ --base-color-warn-400: #b7651e;
101
+ --base-color-warn-500: #99440f;
102
+ --base-color-warn-600: #6f2c08;
103
+ --base-color-warn-700: #4c1b04;
104
+ --base-color-warn-800: #2f0e02;
105
+ --base-color-warn-900: #180500;
106
+ --base-color-warn-1000: #020000;
107
+ --base-color-success-0: #f7fff8;
108
+ --base-color-success-50: #e6f4e8;
109
+ --base-color-success-100: #cbe5cf;
110
+ --base-color-success-200: #9fcaa8;
111
+ --base-color-success-300: #6eaa7d;
112
+ --base-color-success-400: #448653;
113
+ --base-color-success-500: #2f6b3f;
114
+ --base-color-success-600: #214e2d;
115
+ --base-color-success-700: #15371f;
116
+ --base-color-success-800: #0c2313;
117
+ --base-color-success-900: #041108;
118
+ --base-color-success-1000: #000100;
119
+ --semantic-color-text-default: var(--base-color-neutral-900);
120
+ --semantic-color-text-muted: var(--base-color-neutral-600);
121
+ --semantic-color-text-inverse: var(--base-color-neutral-0);
122
+ --semantic-color-text-accent: var(--base-color-accent-600);
123
+ --semantic-color-surface-page: var(--base-color-neutral-0);
124
+ --semantic-color-surface-panel: var(--base-color-neutral-50);
125
+ --semantic-color-surface-raised: var(--base-color-neutral-100);
126
+ --semantic-color-surface-inverse: var(--base-color-neutral-900);
127
+ --semantic-color-border-subtle: var(--base-color-neutral-200);
128
+ --semantic-color-border-default: var(--base-color-neutral-300);
129
+ --semantic-color-border-strong: var(--base-color-neutral-500);
130
+ --semantic-color-action-background: var(--base-color-accent-500);
131
+ --semantic-color-action-background-hover: var(--base-color-accent-600);
132
+ --semantic-color-action-background-pressed: var(--base-color-accent-800);
133
+ --semantic-color-action-foreground: var(--base-color-accent-0);
134
+ --semantic-color-action-foreground-pressed: var(--base-color-accent-100);
135
+ --semantic-color-action-surface: var(--base-color-accent-50);
136
+ --semantic-color-action-border: var(--base-color-accent-300);
137
+ --semantic-color-status-error-background: var(--base-color-error-500);
138
+ --semantic-color-status-error-surface: var(--base-color-error-50);
139
+ --semantic-color-status-error-border: var(--base-color-error-300);
140
+ --semantic-color-status-error-foreground: var(--base-color-error-0);
141
+ --semantic-color-status-warn-background: var(--base-color-warn-500);
142
+ --semantic-color-status-warn-surface: var(--base-color-warn-50);
143
+ --semantic-color-status-warn-border: var(--base-color-warn-300);
144
+ --semantic-color-status-warn-foreground: var(--base-color-warn-0);
145
+ --semantic-color-status-success-background: var(--base-color-success-500);
146
+ --semantic-color-status-success-surface: var(--base-color-success-50);
147
+ --semantic-color-status-success-border: var(--base-color-success-300);
148
+ --semantic-color-status-success-foreground: var(--base-color-success-0);
149
+ --component-button-primary-background: var(--semantic-color-action-background);
150
+ --component-button-primary-background-hover: var(--semantic-color-action-background-hover);
151
+ --component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
152
+ --component-button-primary-foreground: var(--base-color-accent-0);
153
+ --component-button-primary-foreground-hover: var(--base-color-accent-50);
154
+ --component-button-primary-foreground-pressed: var(--base-color-accent-100);
155
+ --component-button-primary-border: var(--semantic-color-action-background);
156
+ --component-button-secondary-background: var(--base-color-accent-0);
157
+ --component-button-secondary-background-hover: var(--base-color-accent-50);
158
+ --component-button-secondary-background-pressed: var(--base-color-accent-100);
159
+ --component-button-secondary-foreground: var(--base-color-accent-600);
160
+ --component-button-secondary-foreground-hover: var(--base-color-accent-700);
161
+ --component-button-secondary-foreground-pressed: var(--base-color-accent-800);
162
+ --component-button-secondary-border: var(--base-color-accent-500);
163
+ --component-button-secondary-border-hover: var(--base-color-accent-700);
164
+ --component-button-secondary-border-pressed: var(--base-color-accent-800);
165
+ --component-button-tertiary-background: var(--base-color-neutral-0);
166
+ --component-button-tertiary-background-hover: var(--base-color-accent-50);
167
+ --component-button-tertiary-background-pressed: var(--base-color-accent-100);
168
+ --component-button-tertiary-foreground: var(--base-color-accent-600);
169
+ --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
170
+ --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
171
+ --component-button-tertiary-border: var(--base-color-neutral-0);
172
+ --component-button-tertiary-border-hover: var(--base-color-accent-50);
173
+ --component-button-tertiary-border-pressed: var(--base-color-accent-100);
174
+ --component-button-focus-ring: var(--base-color-accent-300);
175
+ --component-button-font-family: var(--theme-a1-heritage-font-family-body);
176
+ --component-paragraph-font-family: var(--theme-a1-heritage-font-family-body);
177
+ --component-heading-font-family-heading: var(--theme-a1-heritage-font-family-heading);
178
+ --component-heading-font-family-display: var(--theme-a1-heritage-font-family-display);
179
+ --semantic-font-weight-body: var(--theme-a1-heritage-font-weight-body);
180
+ --semantic-font-weight-heading: var(--theme-a1-heritage-font-weight-heading);
181
+ --semantic-font-weight-display: var(--theme-a1-heritage-font-weight-display);
182
+ --component-paragraph-font-weight: var(--theme-a1-heritage-font-weight-body);
183
+ --component-heading-font-weight-heading: var(--theme-a1-heritage-font-weight-heading);
184
+ --component-heading-font-weight-display: var(--theme-a1-heritage-font-weight-display);
185
+ }
186
+
package/src/utilities/spacing.css ADDED
@@ -0,0 +1,230 @@
1
+ /* ─── Spacing utilities ───────────────────────────────────────────────────────
2
+ Classes follow the pattern: a1-{property}{dimension?}-{size}
3
+ Properties : p (padding) m (margin)
4
+ Dimensions : (omit = all) t b l r x (inline) y (block)
5
+ Sizes : 1 2 4 6 8 12 16 20 24 32 40 64 96 128
6
+ ─────────────────────────────────────────────────────────────────────────── */
7
+
8
+ /* ── All sides: padding ──── */
9
+ .a1-p-1 { padding: var(--base-spacing-1); }
10
+ .a1-p-2 { padding: var(--base-spacing-2); }
11
+ .a1-p-4 { padding: var(--base-spacing-4); }
12
+ .a1-p-6 { padding: var(--base-spacing-6); }
13
+ .a1-p-8 { padding: var(--base-spacing-8); }
14
+ .a1-p-12 { padding: var(--base-spacing-12); }
15
+ .a1-p-16 { padding: var(--base-spacing-16); }
16
+ .a1-p-20 { padding: var(--base-spacing-20); }
17
+ .a1-p-24 { padding: var(--base-spacing-24); }
18
+ .a1-p-32 { padding: var(--base-spacing-32); }
19
+ .a1-p-40 { padding: var(--base-spacing-40); }
20
+ .a1-p-64 { padding: var(--base-spacing-64); }
21
+ .a1-p-96 { padding: var(--base-spacing-96); }
22
+ .a1-p-128 { padding: var(--base-spacing-128); }
23
+
24
+ /* ── Top: padding ─────────── */
25
+ .a1-pt-1 { padding-top: var(--base-spacing-1); }
26
+ .a1-pt-2 { padding-top: var(--base-spacing-2); }
27
+ .a1-pt-4 { padding-top: var(--base-spacing-4); }
28
+ .a1-pt-6 { padding-top: var(--base-spacing-6); }
29
+ .a1-pt-8 { padding-top: var(--base-spacing-8); }
30
+ .a1-pt-12 { padding-top: var(--base-spacing-12); }
31
+ .a1-pt-16 { padding-top: var(--base-spacing-16); }
32
+ .a1-pt-20 { padding-top: var(--base-spacing-20); }
33
+ .a1-pt-24 { padding-top: var(--base-spacing-24); }
34
+ .a1-pt-32 { padding-top: var(--base-spacing-32); }
35
+ .a1-pt-40 { padding-top: var(--base-spacing-40); }
36
+ .a1-pt-64 { padding-top: var(--base-spacing-64); }
37
+ .a1-pt-96 { padding-top: var(--base-spacing-96); }
38
+ .a1-pt-128 { padding-top: var(--base-spacing-128); }
39
+
40
+ /* ── Bottom: padding ──────── */
41
+ .a1-pb-1 { padding-bottom: var(--base-spacing-1); }
42
+ .a1-pb-2 { padding-bottom: var(--base-spacing-2); }
43
+ .a1-pb-4 { padding-bottom: var(--base-spacing-4); }
44
+ .a1-pb-6 { padding-bottom: var(--base-spacing-6); }
45
+ .a1-pb-8 { padding-bottom: var(--base-spacing-8); }
46
+ .a1-pb-12 { padding-bottom: var(--base-spacing-12); }
47
+ .a1-pb-16 { padding-bottom: var(--base-spacing-16); }
48
+ .a1-pb-20 { padding-bottom: var(--base-spacing-20); }
49
+ .a1-pb-24 { padding-bottom: var(--base-spacing-24); }
50
+ .a1-pb-32 { padding-bottom: var(--base-spacing-32); }
51
+ .a1-pb-40 { padding-bottom: var(--base-spacing-40); }
52
+ .a1-pb-64 { padding-bottom: var(--base-spacing-64); }
53
+ .a1-pb-96 { padding-bottom: var(--base-spacing-96); }
54
+ .a1-pb-128 { padding-bottom: var(--base-spacing-128); }
55
+
56
+ /* ── Left: padding ────────── */
57
+ .a1-pl-1 { padding-left: var(--base-spacing-1); }
58
+ .a1-pl-2 { padding-left: var(--base-spacing-2); }
59
+ .a1-pl-4 { padding-left: var(--base-spacing-4); }
60
+ .a1-pl-6 { padding-left: var(--base-spacing-6); }
61
+ .a1-pl-8 { padding-left: var(--base-spacing-8); }
62
+ .a1-pl-12 { padding-left: var(--base-spacing-12); }
63
+ .a1-pl-16 { padding-left: var(--base-spacing-16); }
64
+ .a1-pl-20 { padding-left: var(--base-spacing-20); }
65
+ .a1-pl-24 { padding-left: var(--base-spacing-24); }
66
+ .a1-pl-32 { padding-left: var(--base-spacing-32); }
67
+ .a1-pl-40 { padding-left: var(--base-spacing-40); }
68
+ .a1-pl-64 { padding-left: var(--base-spacing-64); }
69
+ .a1-pl-96 { padding-left: var(--base-spacing-96); }
70
+ .a1-pl-128 { padding-left: var(--base-spacing-128); }
71
+
72
+ /* ── Right: padding ──────── */
73
+ .a1-pr-1 { padding-right: var(--base-spacing-1); }
74
+ .a1-pr-2 { padding-right: var(--base-spacing-2); }
75
+ .a1-pr-4 { padding-right: var(--base-spacing-4); }
76
+ .a1-pr-6 { padding-right: var(--base-spacing-6); }
77
+ .a1-pr-8 { padding-right: var(--base-spacing-8); }
78
+ .a1-pr-12 { padding-right: var(--base-spacing-12); }
79
+ .a1-pr-16 { padding-right: var(--base-spacing-16); }
80
+ .a1-pr-20 { padding-right: var(--base-spacing-20); }
81
+ .a1-pr-24 { padding-right: var(--base-spacing-24); }
82
+ .a1-pr-32 { padding-right: var(--base-spacing-32); }
83
+ .a1-pr-40 { padding-right: var(--base-spacing-40); }
84
+ .a1-pr-64 { padding-right: var(--base-spacing-64); }
85
+ .a1-pr-96 { padding-right: var(--base-spacing-96); }
86
+ .a1-pr-128 { padding-right: var(--base-spacing-128); }
87
+
88
+ /* ── X-axis: padding ─────── */
89
+ .a1-px-1 { padding-left: var(--base-spacing-1); padding-right: var(--base-spacing-1); }
90
+ .a1-px-2 { padding-left: var(--base-spacing-2); padding-right: var(--base-spacing-2); }
91
+ .a1-px-4 { padding-left: var(--base-spacing-4); padding-right: var(--base-spacing-4); }
92
+ .a1-px-6 { padding-left: var(--base-spacing-6); padding-right: var(--base-spacing-6); }
93
+ .a1-px-8 { padding-left: var(--base-spacing-8); padding-right: var(--base-spacing-8); }
94
+ .a1-px-12 { padding-left: var(--base-spacing-12); padding-right: var(--base-spacing-12); }
95
+ .a1-px-16 { padding-left: var(--base-spacing-16); padding-right: var(--base-spacing-16); }
96
+ .a1-px-20 { padding-left: var(--base-spacing-20); padding-right: var(--base-spacing-20); }
97
+ .a1-px-24 { padding-left: var(--base-spacing-24); padding-right: var(--base-spacing-24); }
98
+ .a1-px-32 { padding-left: var(--base-spacing-32); padding-right: var(--base-spacing-32); }
99
+ .a1-px-40 { padding-left: var(--base-spacing-40); padding-right: var(--base-spacing-40); }
100
+ .a1-px-64 { padding-left: var(--base-spacing-64); padding-right: var(--base-spacing-64); }
101
+ .a1-px-96 { padding-left: var(--base-spacing-96); padding-right: var(--base-spacing-96); }
102
+ .a1-px-128 { padding-left: var(--base-spacing-128); padding-right: var(--base-spacing-128); }
103
+
104
+ /* ── Y-axis: padding ─────── */
105
+ .a1-py-1 { padding-top: var(--base-spacing-1); padding-bottom: var(--base-spacing-1); }
106
+ .a1-py-2 { padding-top: var(--base-spacing-2); padding-bottom: var(--base-spacing-2); }
107
+ .a1-py-4 { padding-top: var(--base-spacing-4); padding-bottom: var(--base-spacing-4); }
108
+ .a1-py-6 { padding-top: var(--base-spacing-6); padding-bottom: var(--base-spacing-6); }
109
+ .a1-py-8 { padding-top: var(--base-spacing-8); padding-bottom: var(--base-spacing-8); }
110
+ .a1-py-12 { padding-top: var(--base-spacing-12); padding-bottom: var(--base-spacing-12); }
111
+ .a1-py-16 { padding-top: var(--base-spacing-16); padding-bottom: var(--base-spacing-16); }
112
+ .a1-py-20 { padding-top: var(--base-spacing-20); padding-bottom: var(--base-spacing-20); }
113
+ .a1-py-24 { padding-top: var(--base-spacing-24); padding-bottom: var(--base-spacing-24); }
114
+ .a1-py-32 { padding-top: var(--base-spacing-32); padding-bottom: var(--base-spacing-32); }
115
+ .a1-py-40 { padding-top: var(--base-spacing-40); padding-bottom: var(--base-spacing-40); }
116
+ .a1-py-64 { padding-top: var(--base-spacing-64); padding-bottom: var(--base-spacing-64); }
117
+ .a1-py-96 { padding-top: var(--base-spacing-96); padding-bottom: var(--base-spacing-96); }
118
+ .a1-py-128 { padding-top: var(--base-spacing-128); padding-bottom: var(--base-spacing-128); }
119
+
120
+ /* ── All sides: margin ──── */
121
+ .a1-m-1 { margin: var(--base-spacing-1); }
122
+ .a1-m-2 { margin: var(--base-spacing-2); }
123
+ .a1-m-4 { margin: var(--base-spacing-4); }
124
+ .a1-m-6 { margin: var(--base-spacing-6); }
125
+ .a1-m-8 { margin: var(--base-spacing-8); }
126
+ .a1-m-12 { margin: var(--base-spacing-12); }
127
+ .a1-m-16 { margin: var(--base-spacing-16); }
128
+ .a1-m-20 { margin: var(--base-spacing-20); }
129
+ .a1-m-24 { margin: var(--base-spacing-24); }
130
+ .a1-m-32 { margin: var(--base-spacing-32); }
131
+ .a1-m-40 { margin: var(--base-spacing-40); }
132
+ .a1-m-64 { margin: var(--base-spacing-64); }
133
+ .a1-m-96 { margin: var(--base-spacing-96); }
134
+ .a1-m-128 { margin: var(--base-spacing-128); }
135
+
136
+ /* ── Top: margin ─────────── */
137
+ .a1-mt-1 { margin-top: var(--base-spacing-1); }
138
+ .a1-mt-2 { margin-top: var(--base-spacing-2); }
139
+ .a1-mt-4 { margin-top: var(--base-spacing-4); }
140
+ .a1-mt-6 { margin-top: var(--base-spacing-6); }
141
+ .a1-mt-8 { margin-top: var(--base-spacing-8); }
142
+ .a1-mt-12 { margin-top: var(--base-spacing-12); }
143
+ .a1-mt-16 { margin-top: var(--base-spacing-16); }
144
+ .a1-mt-20 { margin-top: var(--base-spacing-20); }
145
+ .a1-mt-24 { margin-top: var(--base-spacing-24); }
146
+ .a1-mt-32 { margin-top: var(--base-spacing-32); }
147
+ .a1-mt-40 { margin-top: var(--base-spacing-40); }
148
+ .a1-mt-64 { margin-top: var(--base-spacing-64); }
149
+ .a1-mt-96 { margin-top: var(--base-spacing-96); }
150
+ .a1-mt-128 { margin-top: var(--base-spacing-128); }
151
+
152
+ /* ── Bottom: margin ──────── */
153
+ .a1-mb-1 { margin-bottom: var(--base-spacing-1); }
154
+ .a1-mb-2 { margin-bottom: var(--base-spacing-2); }
155
+ .a1-mb-4 { margin-bottom: var(--base-spacing-4); }
156
+ .a1-mb-6 { margin-bottom: var(--base-spacing-6); }
157
+ .a1-mb-8 { margin-bottom: var(--base-spacing-8); }
158
+ .a1-mb-12 { margin-bottom: var(--base-spacing-12); }
159
+ .a1-mb-16 { margin-bottom: var(--base-spacing-16); }
160
+ .a1-mb-20 { margin-bottom: var(--base-spacing-20); }
161
+ .a1-mb-24 { margin-bottom: var(--base-spacing-24); }
162
+ .a1-mb-32 { margin-bottom: var(--base-spacing-32); }
163
+ .a1-mb-40 { margin-bottom: var(--base-spacing-40); }
164
+ .a1-mb-64 { margin-bottom: var(--base-spacing-64); }
165
+ .a1-mb-96 { margin-bottom: var(--base-spacing-96); }
166
+ .a1-mb-128 { margin-bottom: var(--base-spacing-128); }
167
+
168
+ /* ── Left: margin ─────────── */
169
+ .a1-ml-1 { margin-left: var(--base-spacing-1); }
170
+ .a1-ml-2 { margin-left: var(--base-spacing-2); }
171
+ .a1-ml-4 { margin-left: var(--base-spacing-4); }
172
+ .a1-ml-6 { margin-left: var(--base-spacing-6); }
173
+ .a1-ml-8 { margin-left: var(--base-spacing-8); }
174
+ .a1-ml-12 { margin-left: var(--base-spacing-12); }
175
+ .a1-ml-16 { margin-left: var(--base-spacing-16); }
176
+ .a1-ml-20 { margin-left: var(--base-spacing-20); }
177
+ .a1-ml-24 { margin-left: var(--base-spacing-24); }
178
+ .a1-ml-32 { margin-left: var(--base-spacing-32); }
179
+ .a1-ml-40 { margin-left: var(--base-spacing-40); }
180
+ .a1-ml-64 { margin-left: var(--base-spacing-64); }
181
+ .a1-ml-96 { margin-left: var(--base-spacing-96); }
182
+ .a1-ml-128 { margin-left: var(--base-spacing-128); }
183
+
184
+ /* ── Right: margin ─────────── */
185
+ .a1-mr-1 { margin-right: var(--base-spacing-1); }
186
+ .a1-mr-2 { margin-right: var(--base-spacing-2); }
187
+ .a1-mr-4 { margin-right: var(--base-spacing-4); }
188
+ .a1-mr-6 { margin-right: var(--base-spacing-6); }
189
+ .a1-mr-8 { margin-right: var(--base-spacing-8); }
190
+ .a1-mr-12 { margin-right: var(--base-spacing-12); }
191
+ .a1-mr-16 { margin-right: var(--base-spacing-16); }
192
+ .a1-mr-20 { margin-right: var(--base-spacing-20); }
193
+ .a1-mr-24 { margin-right: var(--base-spacing-24); }
194
+ .a1-mr-32 { margin-right: var(--base-spacing-32); }
195
+ .a1-mr-40 { margin-right: var(--base-spacing-40); }
196
+ .a1-mr-64 { margin-right: var(--base-spacing-64); }
197
+ .a1-mr-96 { margin-right: var(--base-spacing-96); }
198
+ .a1-mr-128 { margin-right: var(--base-spacing-128); }
199
+
200
+ /* ── X-axis: margin ──────── */
201
+ .a1-mx-1 { margin-left: var(--base-spacing-1); margin-right: var(--base-spacing-1); }
202
+ .a1-mx-2 { margin-left: var(--base-spacing-2); margin-right: var(--base-spacing-2); }
203
+ .a1-mx-4 { margin-left: var(--base-spacing-4); margin-right: var(--base-spacing-4); }
204
+ .a1-mx-6 { margin-left: var(--base-spacing-6); margin-right: var(--base-spacing-6); }
205
+ .a1-mx-8 { margin-left: var(--base-spacing-8); margin-right: var(--base-spacing-8); }
206
+ .a1-mx-12 { margin-left: var(--base-spacing-12); margin-right: var(--base-spacing-12); }
207
+ .a1-mx-16 { margin-left: var(--base-spacing-16); margin-right: var(--base-spacing-16); }
208
+ .a1-mx-20 { margin-left: var(--base-spacing-20); margin-right: var(--base-spacing-20); }
209
+ .a1-mx-24 { margin-left: var(--base-spacing-24); margin-right: var(--base-spacing-24); }
210
+ .a1-mx-32 { margin-left: var(--base-spacing-32); margin-right: var(--base-spacing-32); }
211
+ .a1-mx-40 { margin-left: var(--base-spacing-40); margin-right: var(--base-spacing-40); }
212
+ .a1-mx-64 { margin-left: var(--base-spacing-64); margin-right: var(--base-spacing-64); }
213
+ .a1-mx-96 { margin-left: var(--base-spacing-96); margin-right: var(--base-spacing-96); }
214
+ .a1-mx-128 { margin-left: var(--base-spacing-128); margin-right: var(--base-spacing-128); }
215
+
216
+ /* ── Y-axis: margin ─────── */
217
+ .a1-my-1 { margin-top: var(--base-spacing-1); margin-bottom: var(--base-spacing-1); }
218
+ .a1-my-2 { margin-top: var(--base-spacing-2); margin-bottom: var(--base-spacing-2); }
219
+ .a1-my-4 { margin-top: var(--base-spacing-4); margin-bottom: var(--base-spacing-4); }
220
+ .a1-my-6 { margin-top: var(--base-spacing-6); margin-bottom: var(--base-spacing-6); }
221
+ .a1-my-8 { margin-top: var(--base-spacing-8); margin-bottom: var(--base-spacing-8); }
222
+ .a1-my-12 { margin-top: var(--base-spacing-12); margin-bottom: var(--base-spacing-12); }
223
+ .a1-my-16 { margin-top: var(--base-spacing-16); margin-bottom: var(--base-spacing-16); }
224
+ .a1-my-20 { margin-top: var(--base-spacing-20); margin-bottom: var(--base-spacing-20); }
225
+ .a1-my-24 { margin-top: var(--base-spacing-24); margin-bottom: var(--base-spacing-24); }
226
+ .a1-my-32 { margin-top: var(--base-spacing-32); margin-bottom: var(--base-spacing-32); }
227
+ .a1-my-40 { margin-top: var(--base-spacing-40); margin-bottom: var(--base-spacing-40); }
228
+ .a1-my-64 { margin-top: var(--base-spacing-64); margin-bottom: var(--base-spacing-64); }
229
+ .a1-my-96 { margin-top: var(--base-spacing-96); margin-bottom: var(--base-spacing-96); }
230
+ .a1-my-128 { margin-top: var(--base-spacing-128); margin-bottom: var(--base-spacing-128); }