@gtivr4/a1-design-system-react 0.6.0 → 0.6.1
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 +1 -1
- package/src/themes.css +144 -0
- package/src/tokens.css +33 -1
package/package.json
CHANGED
package/src/themes.css
CHANGED
|
@@ -293,6 +293,150 @@ html.a1-theme-catlympics.a1-theme-light, html.a1-theme-light.a1-theme-catlympics
|
|
|
293
293
|
}
|
|
294
294
|
|
|
295
295
|
|
|
296
|
+
/* ────────────────────────────────────────────────────────────
|
|
297
|
+
Fresh
|
|
298
|
+
A crisp, airy theme with sky-blue accents, Nunito body text (ExtraBold headings), Baskerville display typography, and a cool mint gradient background. Apply [data-theme='fresh'] to <html>.
|
|
299
|
+
──────────────────────────────────────────────────────────── */
|
|
300
|
+
|
|
301
|
+
[data-theme='fresh'] {
|
|
302
|
+
--base-color-accent-0: #FAFCFF;
|
|
303
|
+
--base-color-accent-50: #ECF3FE;
|
|
304
|
+
--base-color-accent-100: #D8E8FD;
|
|
305
|
+
--base-color-accent-200: #B3CEFB;
|
|
306
|
+
--base-color-accent-300: #7FACF7;
|
|
307
|
+
--base-color-accent-400: #4587EE;
|
|
308
|
+
--base-color-accent-500: #0A62DC;
|
|
309
|
+
--base-color-accent-600: #074FAF;
|
|
310
|
+
--base-color-accent-700: #053C82;
|
|
311
|
+
--base-color-accent-800: #032A5A;
|
|
312
|
+
--base-color-accent-900: #021A3B;
|
|
313
|
+
--base-color-accent-1000: #010D21;
|
|
314
|
+
--base-color-info-0: #FAFCFF;
|
|
315
|
+
--base-color-info-50: #ECF3FE;
|
|
316
|
+
--base-color-info-100: #D8E8FD;
|
|
317
|
+
--base-color-info-200: #B3CEFB;
|
|
318
|
+
--base-color-info-300: #7FACF7;
|
|
319
|
+
--base-color-info-400: #4587EE;
|
|
320
|
+
--base-color-info-500: #0A62DC;
|
|
321
|
+
--base-color-info-600: #074FAF;
|
|
322
|
+
--base-color-info-700: #053C82;
|
|
323
|
+
--base-color-info-800: #032A5A;
|
|
324
|
+
--base-color-info-900: #021A3B;
|
|
325
|
+
--base-color-info-1000: #010D21;
|
|
326
|
+
--base-color-success-0: #F4FEFC;
|
|
327
|
+
--base-color-success-50: #E2FAF3;
|
|
328
|
+
--base-color-success-100: #C5F2E4;
|
|
329
|
+
--base-color-success-200: #8FE3C8;
|
|
330
|
+
--base-color-success-300: #54CE9D;
|
|
331
|
+
--base-color-success-400: #36B080;
|
|
332
|
+
--base-color-success-500: #209261;
|
|
333
|
+
--base-color-success-600: #186C48;
|
|
334
|
+
--base-color-success-700: #114F34;
|
|
335
|
+
--base-color-success-800: #0B3422;
|
|
336
|
+
--base-color-success-900: #061E13;
|
|
337
|
+
--base-color-success-1000: #030F09;
|
|
338
|
+
--base-color-error-0: #FFF8F8;
|
|
339
|
+
--base-color-error-50: #FEEDED;
|
|
340
|
+
--base-color-error-100: #FDDADB;
|
|
341
|
+
--base-color-error-200: #F9ADAF;
|
|
342
|
+
--base-color-error-300: #F27075;
|
|
343
|
+
--base-color-error-400: #E83843;
|
|
344
|
+
--base-color-error-500: #D11720;
|
|
345
|
+
--base-color-error-600: #A51219;
|
|
346
|
+
--base-color-error-700: #7B0D12;
|
|
347
|
+
--base-color-error-800: #52090D;
|
|
348
|
+
--base-color-error-900: #340508;
|
|
349
|
+
--base-color-error-1000: #1C0203;
|
|
350
|
+
--base-color-warn-0: #FEFDF6;
|
|
351
|
+
--base-color-warn-50: #FDF5E2;
|
|
352
|
+
--base-color-warn-100: #FBE9C3;
|
|
353
|
+
--base-color-warn-200: #F7CE87;
|
|
354
|
+
--base-color-warn-300: #F0AA44;
|
|
355
|
+
--base-color-warn-400: #E8A030;
|
|
356
|
+
--base-color-warn-500: #D19317;
|
|
357
|
+
--base-color-warn-600: #A26E0C;
|
|
358
|
+
--base-color-warn-700: #795209;
|
|
359
|
+
--base-color-warn-800: #513807;
|
|
360
|
+
--base-color-warn-900: #332305;
|
|
361
|
+
--base-color-warn-1000: #1D1303;
|
|
362
|
+
--semantic-color-text-default: var(--base-color-neutral-900);
|
|
363
|
+
--semantic-color-text-muted: var(--base-color-neutral-600);
|
|
364
|
+
--semantic-color-text-inverse: var(--base-color-neutral-0);
|
|
365
|
+
--semantic-color-text-accent: var(--base-color-accent-600);
|
|
366
|
+
--semantic-color-surface-page: #D7FFF8;
|
|
367
|
+
--semantic-color-surface-panel: var(--base-color-neutral-0);
|
|
368
|
+
--semantic-color-surface-raised: var(--base-color-neutral-50);
|
|
369
|
+
--semantic-color-border-subtle: var(--base-color-neutral-200);
|
|
370
|
+
--semantic-color-border-default: var(--base-color-neutral-300);
|
|
371
|
+
--semantic-color-border-strong: var(--base-color-neutral-500);
|
|
372
|
+
--semantic-color-action-background: var(--base-color-accent-500);
|
|
373
|
+
--semantic-color-action-background-hover: var(--base-color-accent-600);
|
|
374
|
+
--semantic-color-action-background-pressed: var(--base-color-accent-700);
|
|
375
|
+
--semantic-color-action-foreground: var(--base-color-accent-0);
|
|
376
|
+
--semantic-color-action-foreground-pressed: var(--base-color-accent-100);
|
|
377
|
+
--semantic-color-action-surface: var(--base-color-accent-50);
|
|
378
|
+
--semantic-color-action-border: var(--base-color-accent-300);
|
|
379
|
+
--semantic-color-status-error-background: var(--base-color-error-500);
|
|
380
|
+
--semantic-color-status-error-surface: var(--base-color-error-50);
|
|
381
|
+
--semantic-color-status-error-border: var(--base-color-error-300);
|
|
382
|
+
--semantic-color-status-error-foreground: var(--base-color-error-0);
|
|
383
|
+
--semantic-color-status-warn-background: var(--base-color-warn-500);
|
|
384
|
+
--semantic-color-status-warn-surface: var(--base-color-warn-50);
|
|
385
|
+
--semantic-color-status-warn-border: var(--base-color-warn-300);
|
|
386
|
+
--semantic-color-status-warn-foreground: var(--base-color-warn-0);
|
|
387
|
+
--semantic-color-status-success-background: var(--base-color-success-500);
|
|
388
|
+
--semantic-color-status-success-surface: var(--base-color-success-50);
|
|
389
|
+
--semantic-color-status-success-border: var(--base-color-success-300);
|
|
390
|
+
--semantic-color-status-success-foreground: var(--base-color-success-0);
|
|
391
|
+
--semantic-color-status-info-background: var(--base-color-info-500);
|
|
392
|
+
--semantic-color-status-info-surface: var(--base-color-info-50);
|
|
393
|
+
--semantic-color-status-info-border: var(--base-color-info-300);
|
|
394
|
+
--semantic-color-status-info-foreground: var(--base-color-info-0);
|
|
395
|
+
--component-button-primary-background: var(--semantic-color-action-background);
|
|
396
|
+
--component-button-primary-background-hover: var(--semantic-color-action-background-hover);
|
|
397
|
+
--component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
|
|
398
|
+
--component-button-primary-foreground: var(--base-color-accent-0);
|
|
399
|
+
--component-button-primary-foreground-hover: var(--base-color-accent-50);
|
|
400
|
+
--component-button-primary-foreground-pressed: var(--base-color-accent-100);
|
|
401
|
+
--component-button-primary-border: var(--semantic-color-action-background);
|
|
402
|
+
--component-button-secondary-background: var(--base-color-accent-0);
|
|
403
|
+
--component-button-secondary-background-hover: var(--base-color-accent-50);
|
|
404
|
+
--component-button-secondary-background-pressed: var(--base-color-accent-100);
|
|
405
|
+
--component-button-secondary-foreground: var(--base-color-accent-600);
|
|
406
|
+
--component-button-secondary-foreground-hover: var(--base-color-accent-700);
|
|
407
|
+
--component-button-secondary-foreground-pressed: var(--base-color-accent-800);
|
|
408
|
+
--component-button-secondary-border: var(--base-color-accent-500);
|
|
409
|
+
--component-button-secondary-border-hover: var(--base-color-accent-700);
|
|
410
|
+
--component-button-secondary-border-pressed: var(--base-color-accent-800);
|
|
411
|
+
--component-button-tertiary-background: transparent;
|
|
412
|
+
--component-button-tertiary-background-hover: var(--base-color-accent-50);
|
|
413
|
+
--component-button-tertiary-background-pressed: var(--base-color-accent-100);
|
|
414
|
+
--component-button-tertiary-foreground: var(--base-color-accent-600);
|
|
415
|
+
--component-button-tertiary-foreground-hover: var(--base-color-accent-700);
|
|
416
|
+
--component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
|
|
417
|
+
--component-button-tertiary-border: transparent;
|
|
418
|
+
--component-button-tertiary-border-hover: var(--base-color-accent-50);
|
|
419
|
+
--component-button-tertiary-border-pressed: var(--base-color-accent-100);
|
|
420
|
+
--component-button-focus-ring: var(--base-color-accent-300);
|
|
421
|
+
--base-radius-lg: 0.75rem;
|
|
422
|
+
--base-radius-xl: 10px;
|
|
423
|
+
--component-card-border-radius: 10px;
|
|
424
|
+
--component-dialog-border-radius: 10px;
|
|
425
|
+
--component-button-font-family: var(--theme-a1-fresh-font-family-body);
|
|
426
|
+
--component-paragraph-font-family: var(--theme-a1-fresh-font-family-body);
|
|
427
|
+
--component-heading-font-family-heading: var(--theme-a1-fresh-font-family-heading);
|
|
428
|
+
--component-heading-font-family-display: var(--theme-a1-fresh-font-family-display);
|
|
429
|
+
--semantic-font-weight-body: var(--theme-a1-fresh-font-weight-body);
|
|
430
|
+
--semantic-font-weight-heading: var(--theme-a1-fresh-font-weight-heading);
|
|
431
|
+
--semantic-font-weight-display: var(--theme-a1-fresh-font-weight-display);
|
|
432
|
+
--component-paragraph-font-weight: var(--theme-a1-fresh-font-weight-body);
|
|
433
|
+
--component-heading-font-weight-heading: var(--theme-a1-fresh-font-weight-heading);
|
|
434
|
+
--component-heading-font-weight-display: var(--theme-a1-fresh-font-weight-display);
|
|
435
|
+
background-image: linear-gradient(207.43deg, #D7FFF8 0%, #CDF5EE 57.44%);
|
|
436
|
+
background-attachment: fixed;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
|
|
296
440
|
/* ────────────────────────────────────────────────────────────
|
|
297
441
|
Heritage
|
|
298
442
|
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>.
|
package/src/tokens.css
CHANGED
|
@@ -126,6 +126,7 @@
|
|
|
126
126
|
--base-spacing-24: 1.5rem;
|
|
127
127
|
--base-spacing-32: 2rem;
|
|
128
128
|
--base-spacing-40: 2.5rem;
|
|
129
|
+
--base-spacing-48: 3rem;
|
|
129
130
|
--base-spacing-64: 4rem;
|
|
130
131
|
--base-spacing-96: 6rem;
|
|
131
132
|
--base-spacing-128: 8rem;
|
|
@@ -408,7 +409,7 @@
|
|
|
408
409
|
--component-choice-group-comfortable-min-width: 12.5rem;
|
|
409
410
|
--component-choice-group-comfortable-group-gap: 0.5rem;
|
|
410
411
|
--component-choice-group-comfortable-items-top-gap: 1rem;
|
|
411
|
-
--component-circular-progress-xs-size:
|
|
412
|
+
--component-circular-progress-xs-size: 3rem;
|
|
412
413
|
--component-circular-progress-sm-size: 4rem;
|
|
413
414
|
--component-circular-progress-md-size: 6rem;
|
|
414
415
|
--component-circular-progress-lg-size: 8rem;
|
|
@@ -943,6 +944,37 @@
|
|
|
943
944
|
--theme-a1-catlympics-font-weight-body: 400;
|
|
944
945
|
--theme-a1-catlympics-font-weight-heading: 400;
|
|
945
946
|
--theme-a1-catlympics-font-weight-display: 700;
|
|
947
|
+
--theme-a1-fresh-font-family-body: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
948
|
+
--theme-a1-fresh-font-family-heading: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
949
|
+
--theme-a1-fresh-font-family-display: Baskerville, 'Baskerville Old Face', 'Libre Baskerville', Georgia, Cambria, serif;
|
|
950
|
+
--theme-a1-fresh-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
|
951
|
+
--theme-a1-fresh-font-size-body-xs: 0.75rem;
|
|
952
|
+
--theme-a1-fresh-font-size-body-sm: 0.875rem;
|
|
953
|
+
--theme-a1-fresh-font-size-body-md: 1rem;
|
|
954
|
+
--theme-a1-fresh-font-size-body-lg: 1.125rem;
|
|
955
|
+
--theme-a1-fresh-font-size-body-xl: 1.25rem;
|
|
956
|
+
--theme-a1-fresh-font-size-heading-xl: 2rem;
|
|
957
|
+
--theme-a1-fresh-font-size-heading-lg: 1.75rem;
|
|
958
|
+
--theme-a1-fresh-font-size-heading-md: 1.5rem;
|
|
959
|
+
--theme-a1-fresh-font-size-heading-sm: 1.25rem;
|
|
960
|
+
--theme-a1-fresh-font-size-heading-xs: 1.125rem;
|
|
961
|
+
--theme-a1-fresh-font-size-display-sm: 1.5rem;
|
|
962
|
+
--theme-a1-fresh-font-size-display-md: 1.75rem;
|
|
963
|
+
--theme-a1-fresh-font-size-display-lg: 2rem;
|
|
964
|
+
--theme-a1-fresh-font-size-display-xl: 2.5rem;
|
|
965
|
+
--theme-a1-fresh-font-size-display-xxl: 3.5rem;
|
|
966
|
+
--theme-a1-fresh-font-size-display-jumbo: 4.5rem;
|
|
967
|
+
--theme-a1-fresh-font-size-display-x-jumbo: 6rem;
|
|
968
|
+
--theme-a1-fresh-font-weight-body: 400;
|
|
969
|
+
--theme-a1-fresh-font-weight-heading: 800;
|
|
970
|
+
--theme-a1-fresh-font-weight-display: 400;
|
|
971
|
+
--theme-a1-fresh-font-line-height-body: 1.5em;
|
|
972
|
+
--theme-a1-fresh-font-line-height-heading: 1.25em;
|
|
973
|
+
--theme-a1-fresh-font-line-height-display: 1.125em;
|
|
974
|
+
--theme-a1-fresh-font-user-size-small: 0.875rem;
|
|
975
|
+
--theme-a1-fresh-font-user-size-medium: 1rem;
|
|
976
|
+
--theme-a1-fresh-font-user-size-large: 1.125rem;
|
|
977
|
+
--theme-a1-fresh-font-user-size-xl: 1.25rem;
|
|
946
978
|
--theme-a1-heritage-font-family-body: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
947
979
|
--theme-a1-heritage-font-family-heading: 'Libre Baskerville', Georgia, Cambria, 'Times New Roman', serif;
|
|
948
980
|
--theme-a1-heritage-font-family-display: 'Roboto Slab', Rockwell, Clarendon, Georgia, serif;
|