@gtivr4/a1-design-system-react 0.15.0 → 0.19.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.
- package/package.json +3 -2
- package/src/color-scheme.css +2 -0
- package/src/components/accordion/accordion.css +6 -0
- package/src/components/autocomplete/Autocomplete.d.ts +53 -0
- package/src/components/autocomplete/Autocomplete.jsx +380 -0
- package/src/components/autocomplete/autocomplete.css +346 -0
- package/src/components/banner/Banner.d.ts +9 -2
- package/src/components/banner/Banner.jsx +32 -6
- package/src/components/banner/banner.css +81 -0
- package/src/components/bottom-sheet/BottomSheet.d.ts +22 -0
- package/src/components/bottom-sheet/BottomSheet.jsx +154 -0
- package/src/components/bottom-sheet/bottom-sheet.css +113 -0
- package/src/components/code/Code.d.ts +4 -0
- package/src/components/code/Code.jsx +45 -2
- package/src/components/code/code.css +23 -0
- package/src/components/data-table/DataTable.jsx +11 -1
- package/src/components/data-table/data-table.css +19 -0
- package/src/components/figure/Figure.d.ts +7 -0
- package/src/components/figure/Figure.jsx +23 -2
- package/src/components/figure/figure.css +25 -0
- package/src/components/grid/Grid.d.ts +3 -1
- package/src/components/grid/Grid.jsx +10 -0
- package/src/components/grid/grid.css +11 -0
- package/src/components/page-layout/page-layout.css +10 -4
- package/src/components/page-nav/PageNav.jsx +29 -8
- package/src/components/page-nav/page-nav.css +13 -0
- package/src/components/paragraph/Paragraph.d.ts +2 -0
- package/src/components/paragraph/Paragraph.jsx +4 -0
- package/src/components/paragraph/paragraph.css +6 -6
- package/src/components/segmented-control/SegmentedControl.d.ts +8 -0
- package/src/components/segmented-control/SegmentedControl.jsx +16 -3
- package/src/components/segmented-control/segmented.css +31 -1
- package/src/components/slider/slider.css +10 -2
- package/src/components/split-button/SplitButton.jsx +3 -1
- package/src/components/tabs/tabs.css +3 -0
- package/src/components/toolbar/Toolbar.d.ts +7 -0
- package/src/components/toolbar/Toolbar.jsx +13 -5
- package/src/components/top-header/top-header.css +2 -0
- package/src/components/tree-menu/TreeMenu.jsx +11 -7
- package/src/index.d.ts +71 -0
- package/src/index.js +2 -0
- package/src/themes.css +293 -0
- package/src/tokens.css +22 -1
package/src/themes.css
CHANGED
|
@@ -93,6 +93,152 @@ html.a1-theme-accessible.a1-theme-light, html.a1-theme-light.a1-theme-accessible
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
|
|
96
|
+
/* ────────────────────────────────────────────────────────────
|
|
97
|
+
Aperture
|
|
98
|
+
Modern, minimal, gallery-grade theme for a photography portfolio — near-monochrome graphite on clean whites (Apple + Audi inspired) so imagery dominates, with a refined Apple-blue info and Audi-red error. Type: an elegant script display (Pinyon Script), an editorial serif heading (Playfair Display), and a clean, slightly elegant sans body (Manrope). Apply class="a1-theme-aperture" to <html>.
|
|
99
|
+
──────────────────────────────────────────────────────────── */
|
|
100
|
+
|
|
101
|
+
html.a1-theme-aperture {
|
|
102
|
+
--base-color-accent-0: #FFFFFF;
|
|
103
|
+
--base-color-accent-50: #F5F5F7;
|
|
104
|
+
--base-color-accent-100: #E8E8ED;
|
|
105
|
+
--base-color-accent-200: #D2D2D7;
|
|
106
|
+
--base-color-accent-300: #AEAEB2;
|
|
107
|
+
--base-color-accent-400: #6E6E73;
|
|
108
|
+
--base-color-accent-500: #1D1D1F;
|
|
109
|
+
--base-color-accent-600: #161618;
|
|
110
|
+
--base-color-accent-700: #0F0F10;
|
|
111
|
+
--base-color-accent-800: #08080A;
|
|
112
|
+
--base-color-accent-900: #040405;
|
|
113
|
+
--base-color-accent-1000: #000000;
|
|
114
|
+
--base-color-info-0: #FBFDFF;
|
|
115
|
+
--base-color-info-50: #EAF3FE;
|
|
116
|
+
--base-color-info-100: #D2E6FD;
|
|
117
|
+
--base-color-info-200: #A6CCFB;
|
|
118
|
+
--base-color-info-300: #6FA8F6;
|
|
119
|
+
--base-color-info-400: #3D86EE;
|
|
120
|
+
--base-color-info-500: #0071E3;
|
|
121
|
+
--base-color-info-600: #005BBF;
|
|
122
|
+
--base-color-info-700: #00458F;
|
|
123
|
+
--base-color-info-800: #002E60;
|
|
124
|
+
--base-color-info-900: #001A37;
|
|
125
|
+
--base-color-info-1000: #000D1C;
|
|
126
|
+
--base-color-success-0: #F9FDFB;
|
|
127
|
+
--base-color-success-50: #ECF7F1;
|
|
128
|
+
--base-color-success-100: #D7EEE3;
|
|
129
|
+
--base-color-success-200: #B0DCC8;
|
|
130
|
+
--base-color-success-300: #82C5A8;
|
|
131
|
+
--base-color-success-400: #54A886;
|
|
132
|
+
--base-color-success-500: #2E8765;
|
|
133
|
+
--base-color-success-600: #246B50;
|
|
134
|
+
--base-color-success-700: #1B503C;
|
|
135
|
+
--base-color-success-800: #123528;
|
|
136
|
+
--base-color-success-900: #0A1F17;
|
|
137
|
+
--base-color-success-1000: #05100C;
|
|
138
|
+
--base-color-error-0: #FFFBFB;
|
|
139
|
+
--base-color-error-50: #FCECEE;
|
|
140
|
+
--base-color-error-100: #F8D6DB;
|
|
141
|
+
--base-color-error-200: #F0AEB7;
|
|
142
|
+
--base-color-error-300: #E47E8C;
|
|
143
|
+
--base-color-error-400: #D4536A;
|
|
144
|
+
--base-color-error-500: #BB0A30;
|
|
145
|
+
--base-color-error-600: #960826;
|
|
146
|
+
--base-color-error-700: #71061D;
|
|
147
|
+
--base-color-error-800: #4C0413;
|
|
148
|
+
--base-color-error-900: #2E020B;
|
|
149
|
+
--base-color-error-1000: #170105;
|
|
150
|
+
--base-color-warn-0: #FFFCF6;
|
|
151
|
+
--base-color-warn-50: #FBF2E1;
|
|
152
|
+
--base-color-warn-100: #F6E4C3;
|
|
153
|
+
--base-color-warn-200: #EECB8C;
|
|
154
|
+
--base-color-warn-300: #E0AD55;
|
|
155
|
+
--base-color-warn-400: #C68F35;
|
|
156
|
+
--base-color-warn-500: #9A6D1E;
|
|
157
|
+
--base-color-warn-600: #7B5718;
|
|
158
|
+
--base-color-warn-700: #5C4112;
|
|
159
|
+
--base-color-warn-800: #3D2C0C;
|
|
160
|
+
--base-color-warn-900: #251A07;
|
|
161
|
+
--base-color-warn-1000: #130D03;
|
|
162
|
+
--semantic-color-text-default: #1D1D1F;
|
|
163
|
+
--semantic-color-text-muted: #6E6E73;
|
|
164
|
+
--semantic-color-text-inverse: #FFFFFF;
|
|
165
|
+
--semantic-color-text-accent: var(--base-color-accent-600);
|
|
166
|
+
--semantic-color-surface-page: #FAFAFA;
|
|
167
|
+
--semantic-color-surface-card: #FFFFFF;
|
|
168
|
+
--semantic-color-surface-field: #FFFFFF;
|
|
169
|
+
--semantic-color-surface-panel: #FFFFFF;
|
|
170
|
+
--semantic-color-surface-raised: #F0F0F2;
|
|
171
|
+
--semantic-color-border-subtle: #EBEBED;
|
|
172
|
+
--semantic-color-border-default: #D2D2D7;
|
|
173
|
+
--semantic-color-border-strong: #AEAEB2;
|
|
174
|
+
--semantic-color-action-background: var(--base-color-accent-500);
|
|
175
|
+
--semantic-color-action-background-hover: var(--base-color-accent-600);
|
|
176
|
+
--semantic-color-action-background-pressed: var(--base-color-accent-700);
|
|
177
|
+
--semantic-color-action-foreground: var(--base-color-accent-0);
|
|
178
|
+
--semantic-color-action-foreground-pressed: var(--base-color-accent-100);
|
|
179
|
+
--semantic-color-action-surface: var(--base-color-accent-50);
|
|
180
|
+
--semantic-color-action-border: var(--base-color-accent-300);
|
|
181
|
+
--semantic-color-status-error-background: var(--base-color-error-500);
|
|
182
|
+
--semantic-color-status-error-surface: var(--base-color-error-50);
|
|
183
|
+
--semantic-color-status-error-border: var(--base-color-error-300);
|
|
184
|
+
--semantic-color-status-error-foreground: var(--base-color-error-0);
|
|
185
|
+
--semantic-color-status-warn-background: var(--base-color-warn-500);
|
|
186
|
+
--semantic-color-status-warn-surface: var(--base-color-warn-50);
|
|
187
|
+
--semantic-color-status-warn-border: var(--base-color-warn-300);
|
|
188
|
+
--semantic-color-status-warn-foreground: var(--base-color-warn-0);
|
|
189
|
+
--semantic-color-status-success-background: var(--base-color-success-500);
|
|
190
|
+
--semantic-color-status-success-surface: var(--base-color-success-50);
|
|
191
|
+
--semantic-color-status-success-border: var(--base-color-success-300);
|
|
192
|
+
--semantic-color-status-success-foreground: var(--base-color-success-0);
|
|
193
|
+
--semantic-color-status-info-background: var(--base-color-info-500);
|
|
194
|
+
--semantic-color-status-info-surface: var(--base-color-info-50);
|
|
195
|
+
--semantic-color-status-info-border: var(--base-color-info-300);
|
|
196
|
+
--semantic-color-status-info-foreground: var(--base-color-info-0);
|
|
197
|
+
--component-button-primary-background: var(--semantic-color-action-background);
|
|
198
|
+
--component-button-primary-background-hover: var(--semantic-color-action-background-hover);
|
|
199
|
+
--component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
|
|
200
|
+
--component-button-primary-foreground: var(--base-color-accent-0);
|
|
201
|
+
--component-button-primary-foreground-hover: var(--base-color-accent-50);
|
|
202
|
+
--component-button-primary-foreground-pressed: var(--base-color-accent-100);
|
|
203
|
+
--component-button-primary-border: var(--semantic-color-action-background);
|
|
204
|
+
--component-button-secondary-background: var(--base-color-accent-0);
|
|
205
|
+
--component-button-secondary-background-hover: var(--base-color-accent-50);
|
|
206
|
+
--component-button-secondary-background-pressed: var(--base-color-accent-100);
|
|
207
|
+
--component-button-secondary-foreground: var(--base-color-accent-600);
|
|
208
|
+
--component-button-secondary-foreground-hover: var(--base-color-accent-700);
|
|
209
|
+
--component-button-secondary-foreground-pressed: var(--base-color-accent-800);
|
|
210
|
+
--component-button-secondary-border: var(--base-color-accent-500);
|
|
211
|
+
--component-button-secondary-border-hover: var(--base-color-accent-700);
|
|
212
|
+
--component-button-secondary-border-pressed: var(--base-color-accent-800);
|
|
213
|
+
--component-button-tertiary-background: transparent;
|
|
214
|
+
--component-button-tertiary-background-hover: var(--base-color-accent-50);
|
|
215
|
+
--component-button-tertiary-background-pressed: var(--base-color-accent-100);
|
|
216
|
+
--component-button-tertiary-foreground: var(--base-color-accent-600);
|
|
217
|
+
--component-button-tertiary-foreground-hover: var(--base-color-accent-700);
|
|
218
|
+
--component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
|
|
219
|
+
--component-button-tertiary-border: transparent;
|
|
220
|
+
--component-button-tertiary-border-hover: var(--base-color-accent-50);
|
|
221
|
+
--component-button-tertiary-border-pressed: var(--base-color-accent-100);
|
|
222
|
+
--component-button-focus-ring: var(--base-color-accent-300);
|
|
223
|
+
--base-radius-sm: 0.25rem;
|
|
224
|
+
--base-radius-md: 0.5rem;
|
|
225
|
+
--base-radius-lg: 0.625rem;
|
|
226
|
+
--base-radius-xl: 0.75rem;
|
|
227
|
+
--component-card-border-radius: 14px;
|
|
228
|
+
--component-dialog-border-radius: 16px;
|
|
229
|
+
--component-button-font-family: var(--theme-a1-aperture-font-family-body);
|
|
230
|
+
--component-paragraph-font-family: var(--theme-a1-aperture-font-family-body);
|
|
231
|
+
--component-heading-font-family-heading: var(--theme-a1-aperture-font-family-heading);
|
|
232
|
+
--component-heading-font-family-display: var(--theme-a1-aperture-font-family-display);
|
|
233
|
+
--semantic-font-weight-body: var(--theme-a1-aperture-font-weight-body);
|
|
234
|
+
--semantic-font-weight-heading: var(--theme-a1-aperture-font-weight-heading);
|
|
235
|
+
--semantic-font-weight-display: var(--theme-a1-aperture-font-weight-display);
|
|
236
|
+
--component-paragraph-font-weight: var(--theme-a1-aperture-font-weight-body);
|
|
237
|
+
--component-heading-font-weight-heading: var(--theme-a1-aperture-font-weight-heading);
|
|
238
|
+
--component-heading-font-weight-display: var(--theme-a1-aperture-font-weight-display);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
|
|
96
242
|
/* ────────────────────────────────────────────────────────────
|
|
97
243
|
CatLympics
|
|
98
244
|
Playful, pastel, bouncy theme for CatLympics Game. Apply .a1-theme-catlympics to <html>.
|
|
@@ -293,6 +439,151 @@ html.a1-theme-catlympics.a1-theme-light, html.a1-theme-light.a1-theme-catlympics
|
|
|
293
439
|
}
|
|
294
440
|
|
|
295
441
|
|
|
442
|
+
/* ────────────────────────────────────────────────────────────
|
|
443
|
+
Crochet
|
|
444
|
+
A soft, cozy pastel theme — dusty-rose accents, sage / periwinkle / apricot pastels on warm cream surfaces, warm engaging serif (Fraunces) display & headings, and a slab-serif (Roboto Slab) body. Apply class="a1-theme-crochet" to <html>.
|
|
445
|
+
──────────────────────────────────────────────────────────── */
|
|
446
|
+
|
|
447
|
+
html.a1-theme-crochet {
|
|
448
|
+
--base-color-accent-0: #FFFBFD;
|
|
449
|
+
--base-color-accent-50: #FBEFF5;
|
|
450
|
+
--base-color-accent-100: #F5DEEA;
|
|
451
|
+
--base-color-accent-200: #ECC2D6;
|
|
452
|
+
--base-color-accent-300: #DE9DBA;
|
|
453
|
+
--base-color-accent-400: #C9779B;
|
|
454
|
+
--base-color-accent-500: #B0567F;
|
|
455
|
+
--base-color-accent-600: #8E4063;
|
|
456
|
+
--base-color-accent-700: #6B2F4A;
|
|
457
|
+
--base-color-accent-800: #481E31;
|
|
458
|
+
--base-color-accent-900: #2B121D;
|
|
459
|
+
--base-color-accent-1000: #160910;
|
|
460
|
+
--base-color-info-0: #FBFCFF;
|
|
461
|
+
--base-color-info-50: #EFF2FB;
|
|
462
|
+
--base-color-info-100: #DFE5F6;
|
|
463
|
+
--base-color-info-200: #C2CCEC;
|
|
464
|
+
--base-color-info-300: #9CACDE;
|
|
465
|
+
--base-color-info-400: #7488C9;
|
|
466
|
+
--base-color-info-500: #5E73B0;
|
|
467
|
+
--base-color-info-600: #46588E;
|
|
468
|
+
--base-color-info-700: #34426B;
|
|
469
|
+
--base-color-info-800: #232C48;
|
|
470
|
+
--base-color-info-900: #14192B;
|
|
471
|
+
--base-color-info-1000: #0A0D16;
|
|
472
|
+
--base-color-success-0: #F9FDFB;
|
|
473
|
+
--base-color-success-50: #ECF6F0;
|
|
474
|
+
--base-color-success-100: #D9ECE2;
|
|
475
|
+
--base-color-success-200: #B7DCC7;
|
|
476
|
+
--base-color-success-300: #8DC4A6;
|
|
477
|
+
--base-color-success-400: #63A883;
|
|
478
|
+
--base-color-success-500: #418062;
|
|
479
|
+
--base-color-success-600: #34664E;
|
|
480
|
+
--base-color-success-700: #264C3A;
|
|
481
|
+
--base-color-success-800: #193326;
|
|
482
|
+
--base-color-success-900: #0E1E16;
|
|
483
|
+
--base-color-success-1000: #07100B;
|
|
484
|
+
--base-color-error-0: #FFFBFB;
|
|
485
|
+
--base-color-error-50: #FCEEEE;
|
|
486
|
+
--base-color-error-100: #F8DCDC;
|
|
487
|
+
--base-color-error-200: #F0BCBC;
|
|
488
|
+
--base-color-error-300: #E49494;
|
|
489
|
+
--base-color-error-400: #D26F6F;
|
|
490
|
+
--base-color-error-500: #BB4F4F;
|
|
491
|
+
--base-color-error-600: #963E3E;
|
|
492
|
+
--base-color-error-700: #712F2F;
|
|
493
|
+
--base-color-error-800: #4C1F1F;
|
|
494
|
+
--base-color-error-900: #2E1313;
|
|
495
|
+
--base-color-error-1000: #170909;
|
|
496
|
+
--base-color-warn-0: #FFFCF7;
|
|
497
|
+
--base-color-warn-50: #FBF1E3;
|
|
498
|
+
--base-color-warn-100: #F6E2C6;
|
|
499
|
+
--base-color-warn-200: #EEC891;
|
|
500
|
+
--base-color-warn-300: #E0A95C;
|
|
501
|
+
--base-color-warn-400: #C68B3C;
|
|
502
|
+
--base-color-warn-500: #9C6824;
|
|
503
|
+
--base-color-warn-600: #7D531D;
|
|
504
|
+
--base-color-warn-700: #5E3E16;
|
|
505
|
+
--base-color-warn-800: #3F2A0F;
|
|
506
|
+
--base-color-warn-900: #261907;
|
|
507
|
+
--base-color-warn-1000: #130D04;
|
|
508
|
+
--semantic-color-text-default: #3B2F2C;
|
|
509
|
+
--semantic-color-text-muted: #6B5C55;
|
|
510
|
+
--semantic-color-text-inverse: #FFFFFF;
|
|
511
|
+
--semantic-color-text-accent: var(--base-color-accent-600);
|
|
512
|
+
--semantic-color-surface-page: #FAF4EF;
|
|
513
|
+
--semantic-color-surface-card: #FFFFFF;
|
|
514
|
+
--semantic-color-surface-field: #FFFFFF;
|
|
515
|
+
--semantic-color-surface-panel: #FFFDFB;
|
|
516
|
+
--semantic-color-surface-raised: #F6ECE4;
|
|
517
|
+
--semantic-color-border-subtle: #EFE0D6;
|
|
518
|
+
--semantic-color-border-default: #DDC8BB;
|
|
519
|
+
--semantic-color-border-strong: #BCA294;
|
|
520
|
+
--semantic-color-action-background: var(--base-color-accent-500);
|
|
521
|
+
--semantic-color-action-background-hover: var(--base-color-accent-600);
|
|
522
|
+
--semantic-color-action-background-pressed: var(--base-color-accent-700);
|
|
523
|
+
--semantic-color-action-foreground: var(--base-color-accent-0);
|
|
524
|
+
--semantic-color-action-foreground-pressed: var(--base-color-accent-100);
|
|
525
|
+
--semantic-color-action-surface: var(--base-color-accent-50);
|
|
526
|
+
--semantic-color-action-border: var(--base-color-accent-300);
|
|
527
|
+
--semantic-color-status-error-background: var(--base-color-error-500);
|
|
528
|
+
--semantic-color-status-error-surface: var(--base-color-error-50);
|
|
529
|
+
--semantic-color-status-error-border: var(--base-color-error-300);
|
|
530
|
+
--semantic-color-status-error-foreground: var(--base-color-error-0);
|
|
531
|
+
--semantic-color-status-warn-background: var(--base-color-warn-500);
|
|
532
|
+
--semantic-color-status-warn-surface: var(--base-color-warn-50);
|
|
533
|
+
--semantic-color-status-warn-border: var(--base-color-warn-300);
|
|
534
|
+
--semantic-color-status-warn-foreground: var(--base-color-warn-0);
|
|
535
|
+
--semantic-color-status-success-background: var(--base-color-success-500);
|
|
536
|
+
--semantic-color-status-success-surface: var(--base-color-success-50);
|
|
537
|
+
--semantic-color-status-success-border: var(--base-color-success-300);
|
|
538
|
+
--semantic-color-status-success-foreground: var(--base-color-success-0);
|
|
539
|
+
--semantic-color-status-info-background: var(--base-color-info-500);
|
|
540
|
+
--semantic-color-status-info-surface: var(--base-color-info-50);
|
|
541
|
+
--semantic-color-status-info-border: var(--base-color-info-300);
|
|
542
|
+
--semantic-color-status-info-foreground: var(--base-color-info-0);
|
|
543
|
+
--component-button-primary-background: var(--semantic-color-action-background);
|
|
544
|
+
--component-button-primary-background-hover: var(--semantic-color-action-background-hover);
|
|
545
|
+
--component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
|
|
546
|
+
--component-button-primary-foreground: var(--base-color-accent-0);
|
|
547
|
+
--component-button-primary-foreground-hover: var(--base-color-accent-50);
|
|
548
|
+
--component-button-primary-foreground-pressed: var(--base-color-accent-100);
|
|
549
|
+
--component-button-primary-border: var(--semantic-color-action-background);
|
|
550
|
+
--component-button-secondary-background: var(--base-color-accent-0);
|
|
551
|
+
--component-button-secondary-background-hover: var(--base-color-accent-50);
|
|
552
|
+
--component-button-secondary-background-pressed: var(--base-color-accent-100);
|
|
553
|
+
--component-button-secondary-foreground: var(--base-color-accent-600);
|
|
554
|
+
--component-button-secondary-foreground-hover: var(--base-color-accent-700);
|
|
555
|
+
--component-button-secondary-foreground-pressed: var(--base-color-accent-800);
|
|
556
|
+
--component-button-secondary-border: var(--base-color-accent-500);
|
|
557
|
+
--component-button-secondary-border-hover: var(--base-color-accent-700);
|
|
558
|
+
--component-button-secondary-border-pressed: var(--base-color-accent-800);
|
|
559
|
+
--component-button-tertiary-background: transparent;
|
|
560
|
+
--component-button-tertiary-background-hover: var(--base-color-accent-50);
|
|
561
|
+
--component-button-tertiary-background-pressed: var(--base-color-accent-100);
|
|
562
|
+
--component-button-tertiary-foreground: var(--base-color-accent-600);
|
|
563
|
+
--component-button-tertiary-foreground-hover: var(--base-color-accent-700);
|
|
564
|
+
--component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
|
|
565
|
+
--component-button-tertiary-border: transparent;
|
|
566
|
+
--component-button-tertiary-border-hover: var(--base-color-accent-50);
|
|
567
|
+
--component-button-tertiary-border-pressed: var(--base-color-accent-100);
|
|
568
|
+
--component-button-focus-ring: var(--base-color-accent-300);
|
|
569
|
+
--base-radius-md: 0.625rem;
|
|
570
|
+
--base-radius-lg: 0.875rem;
|
|
571
|
+
--base-radius-xl: 14px;
|
|
572
|
+
--component-card-border-radius: 16px;
|
|
573
|
+
--component-dialog-border-radius: 16px;
|
|
574
|
+
--component-button-font-family: var(--theme-a1-crochet-font-family-body);
|
|
575
|
+
--component-paragraph-font-family: var(--theme-a1-crochet-font-family-body);
|
|
576
|
+
--component-heading-font-family-heading: var(--theme-a1-crochet-font-family-heading);
|
|
577
|
+
--component-heading-font-family-display: var(--theme-a1-crochet-font-family-display);
|
|
578
|
+
--semantic-font-weight-body: var(--theme-a1-crochet-font-weight-body);
|
|
579
|
+
--semantic-font-weight-heading: var(--theme-a1-crochet-font-weight-heading);
|
|
580
|
+
--semantic-font-weight-display: var(--theme-a1-crochet-font-weight-display);
|
|
581
|
+
--component-paragraph-font-weight: var(--theme-a1-crochet-font-weight-body);
|
|
582
|
+
--component-heading-font-weight-heading: var(--theme-a1-crochet-font-weight-heading);
|
|
583
|
+
--component-heading-font-weight-display: var(--theme-a1-crochet-font-weight-display);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
|
|
296
587
|
/* ────────────────────────────────────────────────────────────
|
|
297
588
|
Fresh
|
|
298
589
|
A crisp, airy theme with sky-blue accents, Nunito body text (ExtraBold headings), Baskerville display typography, and a cool mint gradient background. Apply class="a1-theme-fresh" to <html>.
|
|
@@ -559,6 +850,8 @@ html.a1-theme-heritage {
|
|
|
559
850
|
--component-button-tertiary-border-pressed: var(--base-color-accent-100);
|
|
560
851
|
--component-button-focus-ring: var(--base-color-accent-300);
|
|
561
852
|
--base-radius-control: 2px;
|
|
853
|
+
--base-radius-sm: 1px;
|
|
854
|
+
--base-radius-md: 2px;
|
|
562
855
|
--base-radius-lg: 3px;
|
|
563
856
|
--base-radius-xl: 4px;
|
|
564
857
|
--component-button-border-radius: 2px;
|
package/src/tokens.css
CHANGED
|
@@ -347,6 +347,13 @@
|
|
|
347
347
|
--component-bottom-drawer-height: 3.5rem;
|
|
348
348
|
--component-bottom-drawer-border-width: 1px;
|
|
349
349
|
--component-bottom-drawer-z-index: 200;
|
|
350
|
+
--component-bottom-sheet-header-height: 3.5rem;
|
|
351
|
+
--component-bottom-sheet-border-radius: 0.5rem;
|
|
352
|
+
--component-bottom-sheet-handle-width: 2.5rem;
|
|
353
|
+
--component-bottom-sheet-handle-height: 0.25rem;
|
|
354
|
+
--component-bottom-sheet-padding: 1rem;
|
|
355
|
+
--component-bottom-sheet-background: #ffffff;
|
|
356
|
+
--component-bottom-sheet-z-index: 200;
|
|
350
357
|
--component-calendar-month-gap: 2rem;
|
|
351
358
|
--component-calendar-heading-padding-block: 0.75rem;
|
|
352
359
|
--component-calendar-heading-padding-block-compact: 0.5rem;
|
|
@@ -658,9 +665,11 @@
|
|
|
658
665
|
--component-segmented-padding: 0.1875rem;
|
|
659
666
|
--component-segmented-gap: 0.125rem;
|
|
660
667
|
--component-segmented-segment-padding-block: 0.25rem;
|
|
661
|
-
--component-segmented-segment-padding-inline: 0.
|
|
668
|
+
--component-segmented-segment-padding-inline: 0.5rem;
|
|
662
669
|
--component-segmented-segment-padding-block-sm: 0.125rem;
|
|
663
670
|
--component-segmented-segment-padding-inline-sm: 0.5rem;
|
|
671
|
+
--component-segmented-segment-padding-block-lg: 0.5rem;
|
|
672
|
+
--component-segmented-segment-padding-inline-lg: 1rem;
|
|
664
673
|
--component-segmented-border-width: 1px;
|
|
665
674
|
--component-segmented-font-weight-default: 400;
|
|
666
675
|
--component-segmented-font-weight-active: 500;
|
|
@@ -975,6 +984,12 @@
|
|
|
975
984
|
--theme-a1-accessible-font-user-size-medium: 1rem;
|
|
976
985
|
--theme-a1-accessible-font-user-size-large: 1.125rem;
|
|
977
986
|
--theme-a1-accessible-font-user-size-xl: 1.25rem;
|
|
987
|
+
--theme-a1-aperture-font-family-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
988
|
+
--theme-a1-aperture-font-family-heading: 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
|
|
989
|
+
--theme-a1-aperture-font-family-display: 'Pinyon Script', 'Tangerine', 'Snell Roundhand', cursive;
|
|
990
|
+
--theme-a1-aperture-font-weight-body: 400;
|
|
991
|
+
--theme-a1-aperture-font-weight-heading: 600;
|
|
992
|
+
--theme-a1-aperture-font-weight-display: 400;
|
|
978
993
|
--theme-a1-catlympics-font-family-body: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
979
994
|
--theme-a1-catlympics-font-family-heading: 'Patrick Hand SC', system-ui, -apple-system, sans-serif;
|
|
980
995
|
--theme-a1-catlympics-font-family-display: 'Baloo 2', system-ui, -apple-system, sans-serif;
|
|
@@ -982,6 +997,12 @@
|
|
|
982
997
|
--theme-a1-catlympics-font-weight-body: 400;
|
|
983
998
|
--theme-a1-catlympics-font-weight-heading: 400;
|
|
984
999
|
--theme-a1-catlympics-font-weight-display: 700;
|
|
1000
|
+
--theme-a1-crochet-font-family-body: 'Roboto Slab', 'Bitter', Rockwell, 'Roboto Slab', Georgia, serif;
|
|
1001
|
+
--theme-a1-crochet-font-family-heading: 'Libre Baskerville', Georgia, Cambria, 'Times New Roman', serif;
|
|
1002
|
+
--theme-a1-crochet-font-family-display: 'Fraunces', 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
|
|
1003
|
+
--theme-a1-crochet-font-weight-body: 400;
|
|
1004
|
+
--theme-a1-crochet-font-weight-heading: 700;
|
|
1005
|
+
--theme-a1-crochet-font-weight-display: 600;
|
|
985
1006
|
--theme-a1-fresh-font-family-body: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
986
1007
|
--theme-a1-fresh-font-family-heading: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
987
1008
|
--theme-a1-fresh-font-family-display: Baskerville, 'Baskerville Old Face', 'Libre Baskerville', Georgia, Cambria, serif;
|