@workday/canvas-kit-css 13.0.0-alpha.996-next.0 → 13.0.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 (22) hide show
  1. package/action-bar.css +32 -0
  2. package/avatar.css +11 -12
  3. package/badge.css +2 -2
  4. package/banner.css +95 -0
  5. package/button.css +64 -27
  6. package/common.css +2 -0
  7. package/expandable.css +93 -0
  8. package/form-field.css +2 -0
  9. package/icon.css +33 -0
  10. package/loading-dots.css +3 -2
  11. package/menu.css +44 -22
  12. package/modal.css +3 -2
  13. package/package.json +2 -2
  14. package/popup.css +11 -6
  15. package/select.css +19 -17
  16. package/skeleton.css +73 -0
  17. package/switch.css +4 -0
  18. package/table.css +65 -35
  19. package/tabs.css +122 -0
  20. package/text-input.css +8 -5
  21. package/text.css +52 -52
  22. package/tooltip.css +79 -0
package/action-bar.css ADDED
@@ -0,0 +1,32 @@
1
+ .cnvs-action-bar-list {
2
+ box-sizing: border-box;
3
+ display: flex;
4
+ box-shadow: var(--cnvs-sys-depth-1);
5
+ gap: var(--cnvs-sys-space-x4);
6
+ background: var(--cnvs-sys-color-bg-default);
7
+ border-block-start: solid 1px var(--cnvs-sys-color-border-divider);
8
+ padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10);
9
+ position: fixed;
10
+ inset-block-end: 0;
11
+ inset-inline-start: 0;
12
+ inset-inline-end: 0;
13
+ }
14
+
15
+ @media (max-width: 767.5px) {
16
+ .cnvs-action-bar-list {
17
+ padding: var(--cnvs-sys-space-x4);
18
+ }
19
+
20
+ .cnvs-action-bar-list >* {
21
+ flex: 1;
22
+ }
23
+
24
+
25
+ }
26
+
27
+
28
+ .cnvs-action-bar-overflow-button {
29
+ box-sizing: border-box;
30
+ flex: 0;
31
+ }
32
+
package/avatar.css CHANGED
@@ -9,34 +9,42 @@
9
9
  border: 0;
10
10
  overflow: hidden;
11
11
  cursor: default;
12
+ pointer-events: none;
12
13
  border-radius: var(--cnvs-sys-shape-round);
13
14
  width: var(--cnvs-avatar-size);
14
15
  height: var(--cnvs-avatar-size);
15
16
  }
16
17
 
17
- .cnvs-avatar:focus-visible:not([disabled]), .cnvs-avatar.focus:not([disabled]) {
18
+ .cnvs-avatar:focus-visible, .cnvs-avatar.focus {
18
19
  outline: none;
19
20
  box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
20
21
  }
21
22
 
22
23
  .cnvs-avatar :is(button) {
23
24
  cursor: pointer;
25
+ pointer-events: auto;
24
26
  }
25
27
 
26
- .cnvs-avatar>[data-part="avatar-icon"] {
28
+ .cnvs-avatar:disabled, .cnvs-avatar.disabled {
29
+ opacity: var(--cnvs-sys-opacity-disabled);
30
+ }
31
+
32
+ .cnvs-avatar [data-part="avatar-icon"] {
27
33
  transition: opacity 150ms linear;
28
34
  display: flex;
29
35
  align-items: center;
30
36
  justify-content: center;
31
37
  --cnvs-svg-size: calc(var(--cnvs-avatar-size) * 0.625);
38
+ opacity: 1;
32
39
  }
33
40
 
34
- .cnvs-avatar>[data-part="avatar-image"] {
41
+ .cnvs-avatar [data-part="avatar-image"] {
35
42
  position: absolute;
36
43
  width: 100%;
37
44
  height: 100%;
38
45
  border-radius: 999px;
39
46
  transition: opacity 150ms linear;
47
+ opacity: 0;
40
48
  }
41
49
 
42
50
 
@@ -176,12 +184,3 @@
176
184
  opacity: 1;
177
185
  }
178
186
 
179
-
180
- .cnvs-avatar.is-image-loaded-false [data-part="avatar-icon"] {
181
- opacity: 1;
182
- }
183
-
184
- .cnvs-avatar.is-image-loaded-false [data-part="avatar-image"] {
185
- opacity: 0;
186
- }
187
-
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-x8953f {
1
+ @keyframes animation-w1f23n {
2
2
  from {
3
3
  transform: scale(0.85);
4
4
  }
@@ -12,7 +12,7 @@
12
12
  .cnvs-count-badge {
13
13
  box-sizing: border-box;
14
14
  align-items: center;
15
- animation: animation-x8953f 0.2s ease;
15
+ animation: animation-w1f23n 0.2s ease;
16
16
  background: var(--cnvs-sys-color-static-red-default);
17
17
  border-radius: var(--cnvs-sys-shape-round);
18
18
  color: var(--cnvs-sys-color-text-inverse);
package/banner.css ADDED
@@ -0,0 +1,95 @@
1
+ .cnvs-banner-icon {
2
+ box-sizing: border-box;
3
+ margin-inline-end: var(--cnvs-sys-space-x3);
4
+ }
5
+
6
+
7
+ .cnvs-banner-label {
8
+ box-sizing: border-box;
9
+ display: flex;
10
+ flex: 1 1 0%;
11
+ }
12
+
13
+
14
+ .cnvs-action-bar-text {
15
+ box-sizing: border-box;
16
+ text-decoration: underline;
17
+ display: inline;
18
+ }
19
+
20
+
21
+ .cnvs-action-bar-text.is-sticky {
22
+ display: none;
23
+ }
24
+
25
+
26
+ .cnvs-banner {
27
+ box-sizing: border-box;
28
+ font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
29
+ font-weight: var(--cnvs-sys-font-weight-medium);
30
+ line-height: var(--cnvs-sys-line-height-subtext-large);
31
+ font-size: var(--cnvs-sys-font-size-subtext-large);
32
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
33
+ padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
34
+ border: 0;
35
+ display: flex;
36
+ align-items: center;
37
+ text-align: left;
38
+ border-start-start-radius: var(--cnvs-sys-shape-x1);
39
+ border-start-end-radius: var(--cnvs-sys-shape-x1);
40
+ border-end-start-radius: var(--cnvs-sys-shape-x1);
41
+ border-end-end-radius: var(--cnvs-sys-shape-x1);
42
+ cursor: pointer;
43
+ transition: background-color 120ms;
44
+ outline: var(--cnvs-sys-space-x1) solid transparent;
45
+ }
46
+
47
+ .cnvs-banner:focus-visible, .cnvs-banner.focus {
48
+ outline: var(--cnvs-sys-shape-x1) double transparent;
49
+ box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
50
+ }
51
+
52
+
53
+ .cnvs-banner.has-errors {
54
+ background-color: var(--cnvs-brand-error-base);
55
+ color: var(--cnvs-brand-error-accent);
56
+ }
57
+
58
+ .cnvs-banner.has-errors:hover, .cnvs-banner.has-errors.hover {
59
+ background: var(--cnvs-brand-error-dark);
60
+ }
61
+
62
+ .cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
63
+ --cnvs-system-icon-accent-color: var(--cnvs-brand-error-accent);
64
+ --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
65
+ --cnvs-system-icon-background-color: none;
66
+ }
67
+
68
+
69
+ .cnvs-banner.has-errors-false {
70
+ background-color: var(--cnvs-brand-alert-base);
71
+ color: var(--cnvs-sys-color-fg-contrast-default);
72
+ }
73
+
74
+ .cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
75
+ background: var(--cnvs-brand-alert-dark);
76
+ }
77
+
78
+ .cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
79
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-contrast-default);
80
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
81
+ --cnvs-system-icon-background-color: none;
82
+ }
83
+
84
+
85
+ .cnvs-banner.is-sticky {
86
+ width: 13.875rem;
87
+ border-start-end-radius: 0;
88
+ border-end-end-radius: 0;
89
+ }
90
+
91
+
92
+ .cnvs-banner.is-sticky-false {
93
+ width: 20.5rem;
94
+ }
95
+
package/button.css CHANGED
@@ -39,6 +39,8 @@
39
39
  border-color: var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));
40
40
  color: var(--cnvs-button-color-prop-focus-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
41
41
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
42
+ outline: 0.125rem solid transparent;
43
+ outline-offset: 0.125rem;
42
44
  box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-box-shadow-inner, var(--cnvs-button-box-shadow-inner, var(--cnvs-sys-color-border-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-box-shadow-outer, var(--cnvs-button-box-shadow-outer, var(--cnvs-brand-common-focus-outline)));
43
45
  }
44
46
 
@@ -67,12 +69,26 @@
67
69
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
68
70
  }
69
71
 
72
+ @media (prefers-contrast: more) {
73
+ .cnvs-button[aria-pressed="true"] {
74
+ outline: 0.125rem solid transparent;
75
+ outline-offset: -0.0625rem;
76
+ }
77
+
78
+ .cnvs-button[aria-pressed="true"]:focus-visible, .cnvs-button[aria-pressed="true"].focus {
79
+ outline: 0.25rem double transparent;
80
+ outline-offset: 0;
81
+ }
82
+
83
+
84
+ }
85
+
70
86
 
71
87
  .cnvs-button.size-large {
72
- font-family: var(--cnvs-base-font-family-50);
88
+ font-family: var(--cnvs-sys-font-family-default);
73
89
  font-weight: var(--cnvs-sys-font-weight-bold);
74
- line-height: var(--cnvs-base-line-height-150);
75
- font-size: var(--cnvs-base-font-size-100);
90
+ line-height: var(--cnvs-sys-line-height-body-small);
91
+ font-size: var(--cnvs-sys-font-size-body-small);
76
92
  letter-spacing: var(--cnvs-base-letter-spacing-200);
77
93
  height: 3rem;
78
94
  padding-inline: var(--cnvs-sys-space-x8);
@@ -81,10 +97,10 @@
81
97
 
82
98
 
83
99
  .cnvs-button.size-medium {
84
- font-family: var(--cnvs-base-font-family-50);
100
+ font-family: var(--cnvs-sys-font-family-default);
85
101
  font-weight: var(--cnvs-sys-font-weight-bold);
86
- line-height: var(--cnvs-base-line-height-100);
87
- font-size: var(--cnvs-base-font-size-75);
102
+ line-height: var(--cnvs-sys-line-height-subtext-large);
103
+ font-size: var(--cnvs-sys-font-size-subtext-large);
88
104
  letter-spacing: var(--cnvs-base-letter-spacing-150);
89
105
  min-width: 6rem;
90
106
  padding-inline: var(--cnvs-sys-space-x6);
@@ -93,10 +109,10 @@
93
109
 
94
110
 
95
111
  .cnvs-button.size-small {
96
- font-family: var(--cnvs-base-font-family-50);
112
+ font-family: var(--cnvs-sys-font-family-default);
97
113
  font-weight: var(--cnvs-sys-font-weight-bold);
98
- line-height: var(--cnvs-base-line-height-100);
99
- font-size: var(--cnvs-base-font-size-75);
114
+ line-height: var(--cnvs-sys-line-height-subtext-large);
115
+ font-size: var(--cnvs-sys-font-size-subtext-large);
100
116
  letter-spacing: var(--cnvs-base-letter-spacing-150);
101
117
  height: var(--cnvs-sys-space-x8);
102
118
  min-width: var(--cnvs-sys-space-x20);
@@ -106,10 +122,10 @@
106
122
 
107
123
 
108
124
  .cnvs-button.size-extra-small {
109
- font-family: var(--cnvs-base-font-family-50);
125
+ font-family: var(--cnvs-sys-font-family-default);
110
126
  font-weight: var(--cnvs-sys-font-weight-bold);
111
- line-height: var(--cnvs-base-line-height-50);
112
- font-size: var(--cnvs-base-font-size-50);
127
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
128
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
113
129
  letter-spacing: var(--cnvs-base-letter-spacing-100);
114
130
  height: var(--cnvs-sys-space-x6);
115
131
  min-width: auto;
@@ -434,39 +450,60 @@
434
450
  }
435
451
 
436
452
 
453
+ .cnvs-external-hyperlink {
454
+ box-sizing: border-box;
455
+ display: inline-flex;
456
+ flex-direction: row;
457
+ align-items: center;
458
+ }
459
+
460
+ .cnvs-external-hyperlink [data-part="external-hyperlink-icon"] {
461
+ --cnvs-system-icon-color: currentColor;
462
+ --cnvs-svg-size: 1em;
463
+ width: calc(1em - 0.0625rem);
464
+ min-width: calc(var(--cnvs-sys-space-x4) - 0.0625rem);
465
+ margin-inline-start: calc(var(--cnvs-sys-space-x1) - 0.125rem);
466
+ }
467
+
468
+ .cnvs-external-hyperlink [data-part="external-hyperlink-icon"]>svg {
469
+ min-width: var(--cnvs-sys-space-x4);
470
+ min-height: var(--cnvs-sys-space-x4);
471
+ }
472
+
473
+
437
474
  .cnvs-primary-button {
438
475
  box-sizing: border-box;
439
- --cnvs-button-background: var(--cnvs-brand-primary-base);
476
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
440
477
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
441
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
442
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-primary-accent));
478
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
479
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
443
480
  }
444
481
 
445
482
  .cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
446
- --cnvs-button-background: var(--cnvs-brand-primary-base);
447
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
483
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
484
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
448
485
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
449
486
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
450
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-primary-accent));
487
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
451
488
  }
452
489
 
453
490
  .cnvs-primary-button:hover, .cnvs-primary-button.hover {
454
- --cnvs-button-background: var(--cnvs-brand-primary-dark);
455
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
456
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-accent));
491
+ --cnvs-button-background: var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));
492
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
493
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
457
494
  }
458
495
 
459
496
  .cnvs-primary-button:active, .cnvs-primary-button.active {
460
- --cnvs-button-background: var(--cnvs-brand-primary-darkest);
461
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
462
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-accent));
497
+ --cnvs-button-background: var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));
498
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
499
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
463
500
  }
464
501
 
465
502
  .cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
466
- --cnvs-button-background: var(--cnvs-brand-primary-base);
467
- --cnvs-button-label: var(--cnvs-brand-primary-accent);
503
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
504
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
468
505
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
469
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-primary-accent));
506
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent)));
470
507
  }
471
508
 
472
509
 
package/common.css CHANGED
@@ -5,7 +5,9 @@
5
5
  overflow: hidden;
6
6
  white-space: nowrap;
7
7
  height: 1px;
8
+ min-height: 1px;
8
9
  width: 1px;
10
+ min-width: 1px;
9
11
  margin: -1px;
10
12
  padding: 0;
11
13
  border: 0;
package/expandable.css ADDED
@@ -0,0 +1,93 @@
1
+ .cnvs-expandable-content {
2
+ box-sizing: border-box;
3
+ background: var(--cnvs-sys-color-bg-transparent);
4
+ padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
5
+ }
6
+
7
+
8
+ .cnvs-expandable-target {
9
+ box-sizing: border-box;
10
+ background: var(--cnvs-sys-color-bg-transparent);
11
+ border-color: var(--cnvs-sys-color-bg-transparent);
12
+ border-radius: var(--cnvs-sys-shape-x1);
13
+ border-width: 0;
14
+ display: flex;
15
+ align-items: flex-start;
16
+ flex-direction: row;
17
+ justify-content: start;
18
+ padding: var(--cnvs-sys-space-x2);
19
+ cursor: pointer;
20
+ width: 100%;
21
+ }
22
+
23
+ .cnvs-expandable-target:hover, .cnvs-expandable-target.hover {
24
+ background-color: var(--cnvs-sys-color-bg-alt-default);
25
+ }
26
+
27
+
28
+ .cnvs-expandable-icon {
29
+ box-sizing: border-box;
30
+ padding: var(--cnvs-sys-space-x1);
31
+ }
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+ .cnvs-expandable-icon.position-end.is-expanded {
40
+ margin-inline-start: auto;
41
+ transform: rotate(180deg);
42
+ padding-inline-end: var(--cnvs-sys-space-x3);
43
+ }
44
+
45
+
46
+ .cnvs-expandable-icon.position-end.is-expanded {
47
+ margin-inline-start: auto;
48
+ padding-inline-start: var(--cnvs-sys-space-x3);
49
+ }
50
+
51
+
52
+ .cnvs-expandable-icon.position-start.is-expanded {
53
+ margin-inline-end: var(--cnvs-sys-space-x2);
54
+ transform: rotate(90deg);
55
+ }
56
+
57
+ .cnvs-expandable-icon.position-start.is-expanded :dir(rtl) {
58
+ transform: rotate(-90deg);
59
+ }
60
+
61
+
62
+ .cnvs-expandable-icon.position-start.is-expanded {
63
+ margin-inline-end: var(--cnvs-sys-space-x2);
64
+ transform: rotate(180deg);
65
+ }
66
+
67
+
68
+ .cnvs-expandable-title {
69
+ box-sizing: border-box;
70
+ font-family: var(--cnvs-sys-font-family-default);
71
+ font-weight: var(--cnvs-sys-font-weight-bold);
72
+ line-height: var(--cnvs-sys-line-height-body-medium);
73
+ font-size: var(--cnvs-sys-font-size-body-medium);
74
+ color: var(--cnvs-sys-color-text-strong);
75
+ padding: 0.125rem var(--cnvs-sys-space-zero);
76
+ text-align: left;
77
+ }
78
+
79
+
80
+ .cnvs-expandable-avatar {
81
+ box-sizing: border-box;
82
+ margin-inline-end: var(--cnvs-sys-space-x2);
83
+ flex-shrink: 0;
84
+ }
85
+
86
+
87
+ .cnvs-expandable-container {
88
+ box-sizing: border-box;
89
+ display: flex;
90
+ flex-direction: column;
91
+ padding: var(--cnvs-sys-space-x2);
92
+ }
93
+
package/form-field.css CHANGED
@@ -45,7 +45,9 @@
45
45
  overflow: hidden;
46
46
  white-space: nowrap;
47
47
  height: 1px;
48
+ min-height: 1px;
48
49
  width: 1px;
50
+ min-width: 1px;
49
51
  margin: -1px;
50
52
  padding: 0;
51
53
  border: 0;
package/icon.css CHANGED
@@ -97,6 +97,15 @@
97
97
  fill: var(--cnvs-deprecated-system-icon-background-hover, var(--cnvs-system-icon-background-color, transparent));
98
98
  }
99
99
 
100
+ @media (prefers-contrast: more) {
101
+ .cnvs-system-icon .wd-icon-fill, .cnvs-system-icon .wd-icon-accent {
102
+ color: currentColor;
103
+ fill: currentColor;
104
+ }
105
+
106
+
107
+ }
108
+
100
109
 
101
110
  .cnvs-system-icon-circle {
102
111
  box-sizing: border-box;
@@ -130,3 +139,27 @@
130
139
  --cnvs-svg-width: 100%;
131
140
  }
132
141
 
142
+
143
+ .cnvs-graphic-image {
144
+ box-sizing: border-box;
145
+ width: var(--cnvs-graphic-image-width);
146
+ height: var(--cnvs-graphic-image-height);
147
+ display: inline-block;
148
+ }
149
+
150
+ .cnvs-graphic-image [data-part="graphic-img"] {
151
+ width: var(--cnvs-graphic-image-width);
152
+ height: var(--cnvs-graphic-image-height);
153
+ max-width: 100%;
154
+ max-height: 100%;
155
+ }
156
+
157
+
158
+ .cnvs-graphic-image.grow {
159
+ width: 100%;
160
+ }
161
+
162
+ .cnvs-graphic-image.grow [data-part="graphic-img"] {
163
+ width: 100%;
164
+ }
165
+
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-x89550 {
1
+ @keyframes animation-w1f25w {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -23,9 +23,10 @@
23
23
  height: var(--cnvs-sys-space-x4);
24
24
  font-size: var(--cnvs-sys-space-zero);
25
25
  border-radius: var(--cnvs-sys-shape-round);
26
+ outline: 0.125rem solid transparent;
26
27
  transform: scale(0);
27
28
  display: inline-block;
28
- animation-name: animation-x89550;
29
+ animation-name: animation-w1f25w;
29
30
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
30
31
  animation-iteration-count: infinite;
31
32
  animation-timing-function: ease-in-out;
package/menu.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .cnvs-menu-item {
2
2
  box-sizing: border-box;
3
- font-family: var(--cnvs-base-font-family-50);
4
- font-weight: var(--cnvs-base-font-weight-400);
5
- line-height: var(--cnvs-base-line-height-100);
6
- font-size: var(--cnvs-base-font-size-75);
3
+ font-family: var(--cnvs-sys-font-family-default);
4
+ font-weight: var(--cnvs-sys-font-weight-normal);
5
+ line-height: var(--cnvs-sys-line-height-subtext-large);
6
+ font-size: var(--cnvs-sys-font-size-subtext-large);
7
7
  letter-spacing: var(--cnvs-base-letter-spacing-150);
8
8
  display: flex;
9
9
  align-items: center;
@@ -30,11 +30,22 @@
30
30
  display: flex;
31
31
  }
32
32
 
33
- .cnvs-menu-item:is([aria-selected=true]) {
33
+ .cnvs-menu-item[aria-selected=true] {
34
34
  color: var(--cnvs-brand-primary-dark);
35
35
  background-color: var(--cnvs-brand-primary-lightest);
36
36
  }
37
37
 
38
+ .cnvs-menu-item[aria-selected=true] :where([data-part="menu-item-selected"]) {
39
+ opacity: var(--cnvs-sys-opacity-full);
40
+ }
41
+
42
+ .cnvs-menu-item[aria-selected=true]:where(.focus, :focus) {
43
+ --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
44
+ outline: none;
45
+ background-color: var(--cnvs-brand-primary-base);
46
+ color: var(--cnvs-system-icon-color);
47
+ }
48
+
38
49
  .cnvs-menu-item:is(.hover, :hover) {
39
50
  color: var(--cnvs-sys-color-fg-strong);
40
51
  background-color: var(--cnvs-brand-neutral-lightest);
@@ -42,8 +53,9 @@
42
53
 
43
54
  .cnvs-menu-item:is(.focus, :focus) {
44
55
  color: var(--cnvs-brand-primary-accent);
45
- outline: none;
46
56
  background-color: var(--cnvs-brand-primary-base);
57
+ outline: 0.125rem solid transparent;
58
+ outline-offset: -0.125rem;
47
59
  }
48
60
 
49
61
  .cnvs-menu-item:is(:disabled, [aria-disabled=true]) {
@@ -60,7 +72,7 @@
60
72
  align-self: center;
61
73
  }
62
74
 
63
- .cnvs-menu-item :where([data-part="menu-icon-icon"]) {
75
+ .cnvs-menu-item :where([data-part="menu-item-icon"]) {
64
76
  align-self: start;
65
77
  }
66
78
 
@@ -70,12 +82,12 @@
70
82
  --cnvs-menu-card-transform-origin-vertical: top;
71
83
  --cnvs-menu-card-transform-origin-horizontal: left;
72
84
  box-sizing: border-box;
73
- font-family: var(--cnvs-base-font-family-50);
74
- font-weight: var(--cnvs-base-font-weight-400);
75
- line-height: var(--cnvs-base-line-height-100);
76
- font-size: var(--cnvs-base-font-size-75);
85
+ font-family: var(--cnvs-sys-font-family-default);
86
+ font-weight: var(--cnvs-sys-font-weight-normal);
87
+ line-height: var(--cnvs-sys-line-height-subtext-large);
88
+ font-size: var(--cnvs-sys-font-size-subtext-large);
77
89
  letter-spacing: var(--cnvs-base-letter-spacing-150);
78
- color: var(--cnvs-base-palette-black-pepper-300);
90
+ color: var(--cnvs-sys-color-text-default);
79
91
  position: relative;
80
92
  display: flex;
81
93
  flex-direction: column;
@@ -84,6 +96,7 @@
84
96
  max-width: calc(100vw - var(--cnvs-sys-space-x8));
85
97
  box-shadow: var(--cnvs-sys-depth-3);
86
98
  min-width: var(--cnvs-menu-card-min-width);
99
+ max-height: var(--cnvs-menu-card-max-height);
87
100
  transform-origin: var(--cnvs-menu-card-transform-origin-vertical) var(--cnvs-menu-card-transform-origin-horizontal);
88
101
  }
89
102
 
@@ -94,7 +107,7 @@
94
107
 
95
108
  .cnvs-menu-list {
96
109
  box-sizing: border-box;
97
- background: var(--cnvs-base-palette-french-vanilla-100);
110
+ background: var(--cnvs-sys-color-bg-default);
98
111
  border-radius: var(--cnvs-sys-shape-zero);
99
112
  padding: var(--cnvs-sys-space-zero);
100
113
  gap: var(--cnvs-sys-space-zero);
@@ -111,18 +124,27 @@
111
124
  }
112
125
 
113
126
 
114
- .cnvs-menu-option {
127
+ .cnvs-menu-divider {
115
128
  box-sizing: border-box;
129
+ display: block;
130
+ height: 0.0625rem;
131
+ border: var(--cnvs-sys-space-zero);
132
+ border-top: 0.0625rem solid var(--cnvs-sys-color-border-divider);
133
+ margin: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero);
116
134
  }
117
135
 
118
- .cnvs-menu-option:where([aria-selected=true]) :where([data-part="menu-item-selected"]) {
119
- opacity: var(--cnvs-sys-opacity-full);
120
- }
121
136
 
122
- .cnvs-menu-option:where([aria-selected=true]):where(.focus, :focus) {
123
- --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
124
- outline: none;
125
- background-color: var(--cnvs-brand-primary-base);
126
- color: var(--cnvs-system-icon-color);
137
+ .cnvs-menu-group-heading {
138
+ box-sizing: border-box;
139
+ font-family: var(--cnvs-sys-font-family-default);
140
+ font-weight: var(--cnvs-sys-font-weight-bold);
141
+ line-height: var(--cnvs-sys-line-height-subtext-large);
142
+ font-size: var(--cnvs-sys-font-size-subtext-large);
143
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
144
+ display: flex;
145
+ align-items: center;
146
+ width: 100%;
147
+ gap: var(--cnvs-sys-space-x4);
148
+ padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
127
149
  }
128
150
 
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-x89552 {
1
+ @keyframes animation-w1f25y {
2
2
  0% {
3
3
  background: none;
4
4
  }
@@ -18,7 +18,7 @@
18
18
  height: 100vh;
19
19
  background: var(--cnvs-sys-color-bg-overlay);
20
20
  animation-duration: 0.3s;
21
- animation-name: animation-x89552;
21
+ animation-name: animation-w1f25y;
22
22
  }
23
23
 
24
24
  .wd-no-animation .cnvs-modal-overlay-container {
@@ -55,6 +55,7 @@
55
55
  margin: var(--cnvs-sys-space-x10);
56
56
  width: calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));
57
57
  border-width: var(--cnvs-sys-space-zero);
58
+ outline: 0.0625rem solid transparent;
58
59
  box-shadow: var(--cnvs-sys-depth-6);
59
60
  }
60
61