@cds/core 6.4.6 → 6.6.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 (25) hide show
  1. package/custom-elements.json +12 -0
  2. package/global.css +154 -4
  3. package/global.min.css +1 -1
  4. package/internal/decorators/animate.js +1 -1
  5. package/internal/decorators/animate.js.map +1 -1
  6. package/internal/utils/environment.d.ts +1 -0
  7. package/internal/utils/environment.js +1 -1
  8. package/internal/utils/environment.js.map +1 -1
  9. package/internal/utils/events.js +1 -1
  10. package/internal/utils/events.js.map +1 -1
  11. package/internal/utils/global.js +1 -1
  12. package/package.json +1 -1
  13. package/styles/module.tokens.css +147 -1
  14. package/styles/module.tokens.min.css +1 -1
  15. package/styles/module.typography.css +7 -3
  16. package/styles/module.typography.min.css +1 -1
  17. package/styles/theme.dark.css +57 -0
  18. package/styles/theme.dark.min.css +1 -1
  19. package/tokens/tokens.android.xml +147 -1
  20. package/tokens/tokens.d.ts +146 -0
  21. package/tokens/tokens.ios.swift +147 -1
  22. package/tokens/tokens.js +146 -0
  23. package/tokens/tokens.json +821 -4
  24. package/tokens/tokens.scss +181 -0
  25. package/tree-view/tree-item.element.scss.js +1 -1
package/custom-elements.json CHANGED
@@ -46506,6 +46506,10 @@
46506
46506
  {
46507
46507
  "kind": "function",
46508
46508
  "name": "isJestTest"
46509
+ },
46510
+ {
46511
+ "kind": "function",
46512
+ "name": "isJsdomTest"
46509
46513
  }
46510
46514
  ],
46511
46515
  "exports": [
@@ -46524,6 +46528,14 @@
46524
46528
  "name": "isJestTest",
46525
46529
  "module": "internal/utils/environment.js"
46526
46530
  }
46531
+ },
46532
+ {
46533
+ "kind": "js",
46534
+ "name": "isJsdomTest",
46535
+ "declaration": {
46536
+ "name": "isJsdomTest",
46537
+ "module": "internal/utils/environment.js"
46538
+ }
46527
46539
  }
46528
46540
  ]
46529
46541
  },
package/global.css CHANGED
@@ -251,6 +251,7 @@
251
251
  --cds-global-color-tan-800: hsl(41, 23%, 26%);
252
252
  --cds-global-color-tan-900: hsl(41, 23%, 21%);
253
253
  --cds-global-color-tan-1000: hsl(41, 22%, 16%);
254
+ --cds-global-color-construction-25: hsl(198, 33%, 99%);
254
255
  --cds-global-color-construction-50: hsl(198, 36%, 96%);
255
256
  --cds-global-color-construction-100: hsl(198, 20%, 91%);
256
257
  --cds-global-color-construction-200: hsl(198, 14%, 82%);
@@ -278,6 +279,7 @@
278
279
  --cds-global-typography-color-200: var(--cds-global-color-construction-600);
279
280
  --cds-global-typography-color-300: var(--cds-global-color-construction-800);
280
281
  --cds-global-typography-color-400: var(--cds-global-color-construction-900);
282
+ --cds-global-typography-color-450: var(--cds-global-color-construction-1000);
281
283
  --cds-global-typography-color-500: var(--cds-global-color-black);
282
284
  --cds-global-typography-font-weight-light: 300;
283
285
  --cds-global-typography-font-weight-regular: 400;
@@ -305,6 +307,7 @@
305
307
  --cds-global-typography-link-color-hover: var(--cds-global-color-blue-800);
306
308
  --cds-global-typography-link-color-visited: var(--cds-global-color-lavender-600);
307
309
  --cds-global-typography-link-color-visited-hover: var(--cds-global-color-lavender-700);
310
+ --cds-global-typography-link-on-colorbg: var(--cds-global-color-black);
308
311
  --cds-global-typography-body-font-size: calc(14 * var(--cds-internal-scale-3));
309
312
  --cds-global-typography-body-line-height: 1.42857em;
310
313
  --cds-global-typography-body-letter-spacing: -0.014286em;
@@ -317,6 +320,10 @@
317
320
  --cds-global-typography-heading-line-height: 1.125em;
318
321
  --cds-global-typography-heading-letter-spacing: -0.0125em;
319
322
  --cds-global-typography-heading-font-weight: 400;
323
+ --cds-global-typography-headline-font-size: calc(32 * var(--cds-internal-scale-3));
324
+ --cds-global-typography-headline-line-height: 1.125em;
325
+ --cds-global-typography-headline-letter-spacing: -0.0125em;
326
+ --cds-global-typography-headline-font-weight: 400;
320
327
  --cds-global-typography-title-font-size: calc(24 * var(--cds-internal-scale-3));
321
328
  --cds-global-typography-title-line-height: 1.16667em;
322
329
  --cds-global-typography-title-letter-spacing: -0.008333em;
@@ -345,6 +352,13 @@
345
352
  --cds-global-typography-smallcaption-line-height: 1.2em;
346
353
  --cds-global-typography-smallcaption-letter-spacing: 0.05em;
347
354
  --cds-global-typography-smallcaption-font-weight: 500;
355
+ --cds-global-typography-info-hover: var(--cds-global-color-blue-800);
356
+ --cds-global-typography-success-hover: var(--cds-global-color-green-800);
357
+ --cds-global-typography-warning-hover: var(--cds-global-color-ochre-900);
358
+ --cds-global-typography-danger-hover: var(--cds-global-color-red-800);
359
+ --cds-global-typography-neutral-hover: var(--cds-global-color-construction-700);
360
+ --cds-global-typography-disabled: var(--cds-global-color-construction-400);
361
+ --cds-global-typography-disabled-button: var(--cds-global-color-construction-500);
348
362
  --cds-global-animation-duration-instant: 0s;
349
363
  --cds-global-animation-duration-quickest: 0.1s;
350
364
  --cds-global-animation-duration-quicker: 0.15s;
@@ -390,13 +404,34 @@
390
404
  --cds-alias-object-interaction-color-active: var(--cds-global-color-construction-1000);
391
405
  --cds-alias-object-interaction-color-selected: var(--cds-global-color-construction-700);
392
406
  --cds-alias-object-interaction-color-disabled: var(--cds-global-color-construction-300);
393
- --cds-alias-object-app-background: var(--cds-global-color-gray-50);
407
+ --cds-alias-object-app-background: var(--cds-global-color-construction-25);
394
408
  --cds-alias-object-overlay-background: var(--cds-global-color-white);
395
409
  --cds-alias-object-overlay-backdrop-background: hsla(0, 0%, 0%, 0.6);
396
410
  --cds-alias-object-container-background: var(--cds-global-color-white);
397
411
  --cds-alias-object-container-background-tint: var(--cds-global-color-construction-50);
398
412
  --cds-alias-object-container-background-shade: var(--cds-global-color-construction-100);
413
+ --cds-alias-object-container-background-dark: var(--cds-global-color-construction-200);
414
+ --cds-alias-object-container-background-inverse: var(--cds-global-color-construction-200);
415
+ --cds-alias-object-container-background-inverse-tint: var(--cds-global-color-construction-100);
416
+ --cds-alias-object-container-background-inverse-shade: var(--cds-global-color-construction-300);
399
417
  --cds-alias-object-container-border-color: var(--cds-global-color-construction-200);
418
+ --cds-alias-object-info-hover: var(--cds-global-color-blue-800);
419
+ --cds-alias-object-info-click: var(--cds-global-color-blue-900);
420
+ --cds-alias-object-info-secondary-hover: var(--cds-global-color-blue-50);
421
+ --cds-alias-object-success-hover: var(--cds-global-color-green-800);
422
+ --cds-alias-object-success-click: var(--cds-global-color-green-900);
423
+ --cds-alias-object-success-secondary-hover: var(--cds-global-color-green-50);
424
+ --cds-alias-object-warning-hover: var(--cds-global-color-ochre-600);
425
+ --cds-alias-object-warning-click: var(--cds-global-color-ochre-700);
426
+ --cds-alias-object-warning-secondary-hover: var(--cds-global-color-ochre-50);
427
+ --cds-alias-object-danger-hover: var(--cds-global-color-red-800);
428
+ --cds-alias-object-danger-click: var(--cds-global-color-red-900);
429
+ --cds-alias-object-danger-secondary-hover: var(--cds-global-color-red-50);
430
+ --cds-alias-object-neutral-hover: var(--cds-global-color-construction-700);
431
+ --cds-alias-object-neutral-click: var(--cds-global-color-construction-800);
432
+ --cds-alias-object-neutral-secondary-hover: var(--cds-global-color-construction-50);
433
+ --cds-alias-object-inverse-hover: var(--cds-global-color-construction-600);
434
+ --cds-alias-object-inverse-click: var(--cds-global-color-construction-800);
400
435
  --cds-alias-status-info: var(--cds-global-color-blue-700);
401
436
  --cds-alias-status-info-tint: var(--cds-global-color-blue-50);
402
437
  --cds-alias-status-info-shade: var(--cds-global-color-blue-800);
@@ -420,6 +455,117 @@
420
455
  --cds-alias-status-alt: var(--cds-global-color-violet-700);
421
456
  --cds-alias-status-alt-tint: var(--cds-global-color-violet-600);
422
457
  --cds-alias-status-alt-shade: var(--cds-global-color-violet-900);
458
+ --cds-alias-utility-gray: var(--cds-global-color-construction-500);
459
+ --cds-alias-utility-gray-tint: var(--cds-global-color-construction-50);
460
+ --cds-alias-utility-gray-shade: var(--cds-global-color-construction-700);
461
+ --cds-alias-utility-blue: var(--cds-global-color-blue-700);
462
+ --cds-alias-utility-blue-tint: var(--cds-global-color-blue-50);
463
+ --cds-alias-utility-blue-shade: var(--cds-global-color-blue-800);
464
+ --cds-alias-utility-light-blue: var(--cds-global-color-blue-300);
465
+ --cds-alias-utility-light-blue-tint: var(--cds-global-color-blue-50);
466
+ --cds-alias-utility-light-blue-shade: var(--cds-global-color-blue-600);
467
+ --cds-alias-utility-dark-blue: var(--cds-global-color-azure-800);
468
+ --cds-alias-utility-dark-blue-tint: var(--cds-global-color-azure-50);
469
+ --cds-alias-utility-dark-blue-shade: var(--cds-global-color-azure-1000);
470
+ --cds-alias-utility-green: var(--cds-global-color-green-700);
471
+ --cds-alias-utility-green-tint: var(--cds-global-color-green-50);
472
+ --cds-alias-utility-green-shade: var(--cds-global-color-green-800);
473
+ --cds-alias-utility-yellow: var(--cds-global-color-ochre-500);
474
+ --cds-alias-utility-yellow-tint: var(--cds-global-color-ochre-100);
475
+ --cds-alias-utility-yellow-shade: var(--cds-global-color-ochre-700);
476
+ --cds-alias-utility-red: var(--cds-global-color-red-700);
477
+ --cds-alias-utility-red-tint: var(--cds-global-color-red-50);
478
+ --cds-alias-utility-red-shade: var(--cds-global-color-red-800);
479
+ --cds-alias-utility-tangerine: var(--cds-global-color-tangerine-400);
480
+ --cds-alias-utility-tangerine-tint: var(--cds-global-color-tangerine-50);
481
+ --cds-alias-utility-tangerine-shade: var(--cds-global-color-tangerine-600);
482
+ --cds-alias-utility-violet: var(--cds-global-color-violet-600);
483
+ --cds-alias-utility-violet-tint: var(--cds-global-color-violet-50);
484
+ --cds-alias-utility-violet-shade: var(--cds-global-color-violet-800);
485
+ --cds-alias-typography-color-100: var(--cds-);
486
+ --cds-alias-typography-color-200: var(--cds-);
487
+ --cds-alias-typography-color-300: var(--cds-);
488
+ --cds-alias-typography-color-400: var(--cds-);
489
+ --cds-alias-typography-color-450: var(--cds-);
490
+ --cds-alias-typography-color-500: var(--cds-);
491
+ --cds-alias-typography-font-weight-light: 300;
492
+ --cds-alias-typography-font-weight-regular: 400;
493
+ --cds-alias-typography-font-weight-medium: 500;
494
+ --cds-alias-typography-font-weight-semibold: 600;
495
+ --cds-alias-typography-font-weight-bold: 600;
496
+ --cds-alias-typography-font-weight-extrabold: 600;
497
+ --cds-alias-typography-font-size-0: calc(10 * var(--cds-));
498
+ --cds-alias-typography-font-size-1: calc(11 * var(--cds-));
499
+ --cds-alias-typography-font-size-2: calc(12 * var(--cds-));
500
+ --cds-alias-typography-font-size-3: calc(13 * var(--cds-));
501
+ --cds-alias-typography-font-size-4: calc(14 * var(--cds-));
502
+ --cds-alias-typography-font-size-5: calc(16 * var(--cds-));
503
+ --cds-alias-typography-font-size-6: calc(20 * var(--cds-));
504
+ --cds-alias-typography-font-size-7: calc(24 * var(--cds-));
505
+ --cds-alias-typography-font-size-8: calc(32 * var(--cds-));
506
+ --cds-alias-typography-font-size-9: calc(40 * var(--cds-));
507
+ --cds-alias-typography-font-family: "Clarity City", "Avenir Next", sans-serif;
508
+ --cds-alias-typography-header-font-family: "Clarity City", "Avenir Next", sans-serif;
509
+ --cds-alias-typography-monospace-font-family: ui-monospace, Consolas, Menlo, Monaco, monospace;
510
+ --cds-alias-typography-top-gap-height: 0.1475em;
511
+ --cds-alias-typography-ascender-height: 0.1703em;
512
+ --cds-alias-typography-x-height: 0.517em;
513
+ --cds-alias-typography-link-color: var(--cds-);
514
+ --cds-alias-typography-link-color-hover: var(--cds-);
515
+ --cds-alias-typography-link-color-visited: var(--cds-);
516
+ --cds-alias-typography-link-color-visited-hover: var(--cds-);
517
+ --cds-alias-typography-link-on-colorbg: var(--cds-);
518
+ --cds-alias-typography-body-font-size: calc(14 * var(--cds-));
519
+ --cds-alias-typography-body-line-height: 1.42857em;
520
+ --cds-alias-typography-body-letter-spacing: -0.014286em;
521
+ --cds-alias-typography-body-font-weight: 400;
522
+ --cds-alias-typography-display-font-size: calc(40 * var(--cds-));
523
+ --cds-alias-typography-display-line-height: 1.1em;
524
+ --cds-alias-typography-display-letter-spacing: -0.0125em;
525
+ --cds-alias-typography-display-font-weight: 400;
526
+ --cds-alias-typography-heading-font-size: calc(32 * var(--cds-));
527
+ --cds-alias-typography-heading-line-height: 1.125em;
528
+ --cds-alias-typography-heading-letter-spacing: -0.0125em;
529
+ --cds-alias-typography-heading-font-weight: 400;
530
+ --cds-alias-typography-headline-font-size: calc(32 * var(--cds-));
531
+ --cds-alias-typography-headline-line-height: 1.125em;
532
+ --cds-alias-typography-headline-letter-spacing: -0.0125em;
533
+ --cds-alias-typography-headline-font-weight: 400;
534
+ --cds-alias-typography-title-font-size: calc(24 * var(--cds-));
535
+ --cds-alias-typography-title-line-height: 1.16667em;
536
+ --cds-alias-typography-title-letter-spacing: -0.008333em;
537
+ --cds-alias-typography-title-font-weight: 400;
538
+ --cds-alias-typography-section-font-size: calc(20 * var(--cds-));
539
+ --cds-alias-typography-section-line-height: 1.2em;
540
+ --cds-alias-typography-section-letter-spacing: -0.01em;
541
+ --cds-alias-typography-section-font-weight: 400;
542
+ --cds-alias-typography-subsection-font-size: calc(16 * var(--cds-));
543
+ --cds-alias-typography-subsection-line-height: 1.25em;
544
+ --cds-alias-typography-subsection-letter-spacing: -0.0125em;
545
+ --cds-alias-typography-subsection-font-weight: 400;
546
+ --cds-alias-typography-message-font-size: calc(16 * var(--cds-));
547
+ --cds-alias-typography-message-line-height: 1.25em;
548
+ --cds-alias-typography-message-letter-spacing: -0.0125em;
549
+ --cds-alias-typography-message-font-weight: calc(400 * (1rem / var(--cds-global-base)));
550
+ --cds-alias-typography-secondary-font-size: calc(13 * var(--cds-));
551
+ --cds-alias-typography-secondary-line-height: 1.23077em;
552
+ --cds-alias-typography-secondary-letter-spacing: -0.007692em;
553
+ --cds-alias-typography-secondary-font-weight: 400;
554
+ --cds-alias-typography-caption-font-size: calc(11 * var(--cds-));
555
+ --cds-alias-typography-caption-line-height: 1.454545em;
556
+ --cds-alias-typography-caption-letter-spacing: 0.018182em;
557
+ --cds-alias-typography-caption-font-weight: 400;
558
+ --cds-alias-typography-smallcaption-font-size: calc(10 * var(--cds-));
559
+ --cds-alias-typography-smallcaption-line-height: 1.2em;
560
+ --cds-alias-typography-smallcaption-letter-spacing: 0.05em;
561
+ --cds-alias-typography-smallcaption-font-weight: 500;
562
+ --cds-alias-typography-info-hover: var(--cds-);
563
+ --cds-alias-typography-success-hover: var(--cds-);
564
+ --cds-alias-typography-warning-hover: var(--cds-);
565
+ --cds-alias-typography-danger-hover: var(--cds-);
566
+ --cds-alias-typography-neutral-hover: var(--cds-);
567
+ --cds-alias-typography-disabled: var(--cds-);
568
+ --cds-alias-typography-disabled-button: var(--cds-);
423
569
  --cds-internal-scale-1: calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space));
424
570
  --cds-internal-scale-2: calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space));
425
571
  --cds-internal-scale-3: calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography));
@@ -496,6 +642,7 @@ html[cds-focus-trap] {
496
642
 
497
643
  [cds-text*=display],
498
644
  [cds-text*=heading],
645
+ [cds-text*=headline],
499
646
  [cds-text*=title],
500
647
  [cds-text*=section],
501
648
  [cds-text*=subsection] {
@@ -539,20 +686,23 @@ html[cds-focus-trap] {
539
686
  );
540
687
  }
541
688
 
542
- [cds-text*=heading] {
689
+ [cds-text*=heading],
690
+ [cds-text*=headline] {
543
691
  font-size: var(--cds-global-typography-heading-font-size);
544
692
  font-weight: var(--cds-global-typography-heading-font-weight);
545
693
  line-height: var(--cds-global-typography-heading-line-height);
546
694
  letter-spacing: var(--cds-global-typography-heading-letter-spacing);
547
695
  }
548
- [cds-text*=heading]::before {
696
+ [cds-text*=heading]::before,
697
+ [cds-text*=headline]::before {
549
698
  content: "";
550
699
  display: block;
551
700
  height: 0;
552
701
  width: 0;
553
702
  margin-bottom: calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-heading-line-height) - 1em) / 2)) * -1) + 0.037em);
554
703
  }
555
- [cds-text*=heading]::after {
704
+ [cds-text*=heading]::after,
705
+ [cds-text*=headline]::after {
556
706
  content: "";
557
707
  display: block;
558
708
  height: 0;