@workday/canvas-kit-css 16.0.0-alpha.0478-next.0 → 16.0.0-alpha.0483-next.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 (10) hide show
  1. package/badge.css +2 -2
  2. package/breadcrumbs.css +20 -4
  3. package/button.css +25 -21
  4. package/loading-dots.css +2 -2
  5. package/modal.css +2 -2
  6. package/package.json +2 -2
  7. package/pagination.css +28 -4
  8. package/popup.css +2 -2
  9. package/skeleton.css +2 -2
  10. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-37l36z {
1
+ @keyframes animation-2wns1w {
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-37l36z 0.2s ease;
15
+ animation: animation-2wns1w 0.2s ease;
16
16
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
17
17
  display: inline-flex;
18
18
  font-family: var(--cnvs-sys-font-family-default);
package/breadcrumbs.css CHANGED
@@ -2,10 +2,10 @@
2
2
  box-sizing: border-box;
3
3
  font-family: var(--cnvs-sys-font-family-default);
4
4
  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
5
- font-weight: var(--cnvs-sys-font-weight-medium);
5
+ font-weight: var(--cnvs-sys-font-weight-normal);
6
6
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
7
7
  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
8
- color: var(--cnvs-sys-color-fg-default);
8
+ color: var(--cnvs-sys-color-fg-muted-default);
9
9
  display: inline-block;
10
10
  white-space: nowrap;
11
11
  text-overflow: ellipsis;
@@ -21,12 +21,24 @@
21
21
  font-weight: var(--cnvs-sys-font-weight-normal);
22
22
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
23
23
  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
24
+ color: var(--cnvs-sys-color-fg-default);
24
25
  text-overflow: ellipsis;
25
26
  overflow: hidden;
26
27
  white-space: nowrap;
27
28
  max-width: var(--cnvs-breadcrumbs-link-max-width);
28
29
  }
29
30
 
31
+ .cnvs-breadcrumbs-link:hover, .cnvs-breadcrumbs-link.hover {
32
+ color: var(--cnvs-sys-color-fg-strong);
33
+ background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
34
+ text-decoration: underline;
35
+ }
36
+
37
+ .cnvs-breadcrumbs-link:active, .cnvs-breadcrumbs-link.active {
38
+ color: var(--cnvs-sys-color-fg-strong);
39
+ background-color: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
40
+ }
41
+
30
42
 
31
43
  .cnvs-breadcrumbs-item {
32
44
  box-sizing: border-box;
@@ -34,7 +46,7 @@
34
46
  display: inline-flex;
35
47
  white-space: nowrap;
36
48
  --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
37
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
49
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-default);
38
50
  }
39
51
 
40
52
  .cnvs-breadcrumbs-item [data-part="breadcrumbs-item-chevron-right-icon"] {
@@ -80,10 +92,14 @@
80
92
  box-sizing: border-box;
81
93
  align-items: center;
82
94
  display: flex;
83
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
95
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-default);
84
96
  --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
85
97
  }
86
98
 
99
+ .cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button"] {
100
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
101
+ }
102
+
87
103
  .cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] {
88
104
  height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
89
105
  width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
package/button.css CHANGED
@@ -494,7 +494,7 @@
494
494
  box-sizing: border-box;
495
495
  font-family: var(--cnvs-sys-font-family-default);
496
496
  text-decoration: underline;
497
- color: var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));
497
+ color: var(--cnvs-sys-color-fg-link-default);
498
498
  cursor: pointer;
499
499
  border-radius: 0.125rem;
500
500
  padding: 0 0.125rem;
@@ -504,8 +504,8 @@
504
504
  }
505
505
 
506
506
  .cnvs-hyperlink:hover, .cnvs-hyperlink.hover {
507
- color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
508
- background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
507
+ color: var(--cnvs-sys-color-fg-link-hover);
508
+ background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
509
509
  }
510
510
 
511
511
  .cnvs-hyperlink:focus, .cnvs-hyperlink.focus, .cnvs-hyperlink:focus-visible {
@@ -513,9 +513,17 @@
513
513
  outline: none;
514
514
  }
515
515
 
516
+ @media (forced-colors: active) {
517
+ .cnvs-hyperlink:focus, .cnvs-hyperlink.focus, .cnvs-hyperlink:focus-visible {
518
+ outline: solid 0.125rem ButtonBorder;
519
+ }
520
+
521
+
522
+ }
523
+
516
524
  .cnvs-hyperlink:active, .cnvs-hyperlink.active {
517
- color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
518
- background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
525
+ color: var(--cnvs-sys-color-fg-link-hover);
526
+ background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
519
527
  }
520
528
 
521
529
 
@@ -533,33 +541,29 @@
533
541
  }
534
542
 
535
543
  .cnvs-hyperlink.variant-inverse:active, .cnvs-hyperlink.variant-inverse.active {
536
- color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
544
+ color: var(--cnvs-sys-color-fg-link-hover);
537
545
  background: var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));
538
546
  }
539
547
 
540
548
 
541
- .cnvs-hyperlink.variant-standalone {
542
- text-decoration: none;
549
+ .cnvs-hyperlink.variant-secondary {
550
+ color: var(--cnvs-sys-color-fg-default);
543
551
  }
544
552
 
545
-
546
- .cnvs-hyperlink.variant-standalone-inverse {
547
- text-decoration: none;
548
- color: var(--cnvs-sys-color-fg-inverse);
553
+ .cnvs-hyperlink.variant-secondary:hover, .cnvs-hyperlink.variant-secondary.hover {
554
+ color: var(--cnvs-sys-color-fg-strong);
555
+ background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
549
556
  }
550
557
 
551
- .cnvs-hyperlink.variant-standalone-inverse:hover, .cnvs-hyperlink.variant-standalone-inverse.hover {
552
- color: var(--cnvs-sys-color-fg-inverse);
553
- background: rgba(255, 255, 255, 0.1);
558
+ .cnvs-hyperlink.variant-secondary:active, .cnvs-hyperlink.variant-secondary.active {
559
+ color: var(--cnvs-sys-color-fg-strong);
560
+ background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
554
561
  }
555
562
 
556
- .cnvs-hyperlink.variant-standalone-inverse:focus, .cnvs-hyperlink.variant-standalone-inverse.focus, .cnvs-hyperlink.variant-standalone-inverse:focus-visible {
557
- box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
558
- }
559
563
 
560
- .cnvs-hyperlink.variant-standalone-inverse:active, .cnvs-hyperlink.variant-standalone-inverse.active {
561
- color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
562
- background: var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));
564
+
565
+ .cnvs-hyperlink.link-type-standalone {
566
+ text-decoration: none;
563
567
  }
564
568
 
565
569
 
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-3q1bzt {
1
+ @keyframes animation-3f16sh {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -37,7 +37,7 @@
37
37
  outline: 0.125rem solid transparent;
38
38
  transform: scale(0);
39
39
  display: inline-block;
40
- animation-name: animation-3q1bzt;
40
+ animation-name: animation-3f16sh;
41
41
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
42
42
  animation-iteration-count: infinite;
43
43
  animation-timing-function: ease-in-out;
package/modal.css CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
 
48
- @keyframes animation-4npv6 {
48
+ @keyframes animation-4989q0 {
49
49
  0% {
50
50
  background: none;
51
51
  }
@@ -65,7 +65,7 @@
65
65
  height: 100vh;
66
66
  background: var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));
67
67
  animation-duration: 0.3s;
68
- animation-name: animation-4npv6;
68
+ animation-name: animation-4989q0;
69
69
  }
70
70
 
71
71
  .wd-no-animation .cnvs-modal-overlay-container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "16.0.0-alpha.0478-next.0",
3
+ "version": "16.0.0-alpha.0483-next.0",
4
4
  "type": "module",
5
5
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
6
6
  "author": "Workday, Inc. (https://www.workday.com)",
@@ -26,5 +26,5 @@
26
26
  "components",
27
27
  "workday"
28
28
  ],
29
- "gitHead": "d84620c64bada313ccd29fa9672193473f9b5633"
29
+ "gitHead": "d78aaca7a4894a345fbf05f88ba6e84b41b8028b"
30
30
  }
package/pagination.css CHANGED
@@ -40,6 +40,11 @@
40
40
  box-sizing: border-box;
41
41
  }
42
42
 
43
+ .cnvs-control-button>span {
44
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));
45
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
46
+ }
47
+
43
48
  .cnvs-control-button:dir(rtl) .wd-icon {
44
49
  transform: scaleX(-1);
45
50
  }
@@ -50,6 +55,7 @@
50
55
  display: flex;
51
56
  align-items: center;
52
57
  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
58
+ margin-inline-start: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
53
59
  }
54
60
 
55
61
  .cnvs-pagination-go-to-form :dir(rtl) {
@@ -67,6 +73,7 @@
67
73
  box-sizing: border-box;
68
74
  min-width: 3.4375rem;
69
75
  width: 3.4375rem;
76
+ text-align: center;
70
77
  }
71
78
 
72
79
 
@@ -79,13 +86,21 @@
79
86
  --cnvs-button-label: var(--cnvs-sys-color-fg-default);
80
87
  }
81
88
 
82
- .cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
83
- --cnvs-button-background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
89
+ .cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
90
+ --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
84
91
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
92
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
93
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
85
94
  }
86
95
 
87
- .cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active, .cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
88
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
96
+ .cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
97
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
98
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
99
+ }
100
+
101
+ .cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active {
102
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
103
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
89
104
  }
90
105
 
91
106
  .cnvs-pagination-page-button:disabled, .cnvs-pagination-page-button.disabled {
@@ -99,6 +114,15 @@
99
114
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
100
115
  }
101
116
 
117
+ @media (prefers-contrast: more) {
118
+ .cnvs-pagination-page-button.toggled {
119
+ outline: 0.125rem solid transparent;
120
+ outline-offset: -0.0625rem;
121
+ }
122
+
123
+
124
+ }
125
+
102
126
  .cnvs-pagination-page-button.toggled:hover, .cnvs-pagination-page-button.toggled.hover, .cnvs-pagination-page-button.toggled:active, .cnvs-pagination-page-button.toggled.active, .cnvs-pagination-page-button.toggled:focus-visible, .cnvs-pagination-page-button.toggled.focus {
103
127
  --cnvs-button-background: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
104
128
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
package/popup.css CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
 
48
- @keyframes animation-196tlr {
48
+ @keyframes animation-3nm7cn {
49
49
  0% {
50
50
  opacity: 1;
51
51
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -74,7 +74,7 @@
74
74
  border-radius: var(--cnvs-sys-shape-xxxl, 2rem);
75
75
  max-height: var(--cnvs-popup-card-max-height);
76
76
  overflow-y: auto;
77
- animation-name: animation-196tlr;
77
+ animation-name: animation-3nm7cn;
78
78
  animation-duration: 150ms;
79
79
  animation-timing-function: ease-out;
80
80
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/skeleton.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
 
39
- @keyframes animation-1ksnry {
39
+ @keyframes animation-3zet5r {
40
40
  from {
41
41
  opacity: 0.4;
42
42
  }
@@ -49,7 +49,7 @@
49
49
 
50
50
  .cnvs-skeleton {
51
51
  box-sizing: border-box;
52
- animation: animation-1ksnry 0.8s linear infinite alternate;
52
+ animation: animation-3zet5r 0.8s linear infinite alternate;
53
53
  position: relative;
54
54
  overflow: hidden;
55
55
  height: 100%;
package/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-3gmlnl {
1
+ @keyframes animation-2y6rqp {
2
2
  0% {
3
3
  opacity: 0;
4
4
  transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
@@ -22,7 +22,7 @@
22
22
  position: relative;
23
23
  padding: 0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
24
24
  color: var(--cnvs-sys-color-fg-default);
25
- animation-name: animation-3gmlnl;
25
+ animation-name: animation-2y6rqp;
26
26
  animation-duration: 150ms;
27
27
  animation-timing-function: ease-out;
28
28
  transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);