@workday/canvas-kit-css 16.0.0-alpha.0455-next.0 → 16.0.0-alpha.0460-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 (8) hide show
  1. package/badge.css +2 -2
  2. package/loading-dots.css +2 -2
  3. package/menu.css +29 -26
  4. package/modal.css +2 -2
  5. package/package.json +2 -2
  6. package/popup.css +2 -2
  7. package/skeleton.css +2 -2
  8. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-4dt8de {
1
+ @keyframes animation-2pupaq {
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-4dt8de 0.2s ease;
15
+ animation: animation-2pupaq 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/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-1r1vfv {
1
+ @keyframes animation-2vczj9 {
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-1r1vfv;
40
+ animation-name: animation-2vczj9;
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/menu.css CHANGED
@@ -8,13 +8,13 @@
8
8
  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
9
9
  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
10
10
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
11
- color: var(--cnvs-sys-color-fg-default);
11
+ color: var(--cnvs-sys-color-fg-strong);
12
12
  position: relative;
13
13
  display: flex;
14
14
  flex-direction: column;
15
15
  transition: transform ease-out 150ms;
16
- padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
17
- border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
16
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
17
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
18
18
  max-width: calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));
19
19
  box-shadow: var(--cnvs-sys-depth-3);
20
20
  min-width: var(--cnvs-menu-card-min-width);
@@ -48,7 +48,8 @@
48
48
  align-items: center;
49
49
  width: 100%;
50
50
  gap: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
51
- padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
51
+ padding-block: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
52
+ padding-inline: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
52
53
  }
53
54
 
54
55
 
@@ -62,12 +63,12 @@
62
63
  display: flex;
63
64
  align-items: center;
64
65
  width: 100%;
65
- gap: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
66
- padding: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
66
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
67
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
67
68
  cursor: pointer;
68
- color: var(--cnvs-sys-color-fg-default);
69
+ color: var(--cnvs-sys-color-fg-strong);
69
70
  border-width: 0;
70
- border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
71
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
71
72
  text-align: start;
72
73
  transition: background-color 80ms,color 80ms;
73
74
  background-color: inherit;
@@ -86,8 +87,8 @@
86
87
  }
87
88
 
88
89
  .cnvs-menu-item[aria-selected=true] {
89
- color: var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
90
- background-color: var(--cnvs-sys-color-brand-surface-primary-strong, oklch(0.6152 0.2108 256.1 / 0.11));
90
+ color: var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
91
+ background-color: var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));
91
92
  }
92
93
 
93
94
  .cnvs-menu-item[aria-selected=true] :where([data-part="menu-item-selected"]) {
@@ -95,35 +96,41 @@
95
96
  }
96
97
 
97
98
  .cnvs-menu-item[aria-selected=true]:where(.focus, :focus-visible) {
98
- --cnvs-system-icon-color: currentColor;
99
- outline: none;
100
- background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
101
- color: var(--cnvs-sys-color-fg-inverse);
99
+ outline: 0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
100
+ outline-offset: -0.125rem;
102
101
  }
103
102
 
104
103
  .cnvs-menu-item:is(.hover, :hover) {
105
- color: var(--cnvs-sys-color-fg-strong);
106
104
  background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
107
105
  }
108
106
 
107
+ .cnvs-menu-item:is(.active, :active) {
108
+ background-color: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
109
+ }
110
+
109
111
  .cnvs-menu-item:is(.focus, :focus-visible) {
110
- color: var(--cnvs-sys-color-fg-inverse);
111
- background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
112
- outline: 0.125rem solid transparent;
112
+ outline: 0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
113
113
  outline-offset: -0.125rem;
114
114
  }
115
115
 
116
+ .cnvs-menu-item[aria-expanded="true"]:is(.focus, :focus-visible) {
117
+ color: var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
118
+ background-color: var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));
119
+ outline: none;
120
+ }
121
+
116
122
  .cnvs-menu-item:is(:disabled, [aria-disabled=true]) {
117
123
  cursor: default;
118
124
  opacity: var(--cnvs-sys-opacity-disabled);
119
125
  }
120
126
 
121
- .cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.hover, :hover, [aria-selected=true]) {
127
+ .cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.hover, :hover) {
122
128
  background: none;
123
129
  }
124
130
 
125
131
  .cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.focus, :focus-visible) {
126
- background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
132
+ color: var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
133
+ background-color: var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));
127
134
  opacity: var(--cnvs-sys-opacity-disabled);
128
135
  }
129
136
 
@@ -132,17 +139,13 @@
132
139
  align-self: center;
133
140
  }
134
141
 
135
- .cnvs-menu-item :where([data-part="menu-item-icon"]) {
136
- align-self: start;
137
- }
138
-
139
142
 
140
143
  .cnvs-menu-list {
141
144
  box-sizing: border-box;
142
145
  background: var(--cnvs-sys-color-surface-popover, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
143
- border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
146
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
144
147
  padding: 0;
145
- gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
148
+ gap: var(--cnvs-base-size-25, 0.125rem);
146
149
  }
147
150
 
148
151
 
package/modal.css CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
 
48
- @keyframes animation-2ebvv6 {
48
+ @keyframes animation-2gv82u {
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-2ebvv6;
68
+ animation-name: animation-2gv82u;
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.0455-next.0",
3
+ "version": "16.0.0-alpha.0460-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": "86cf338e9d6fbfe27046329e333be879793d2a51"
29
+ "gitHead": "f077a912b317130c7bf1191d3fea5211c58a5bb4"
30
30
  }
package/popup.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
 
13
- @keyframes animation-rciky {
13
+ @keyframes animation-29kkhp {
14
14
  0% {
15
15
  opacity: 1;
16
16
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -39,7 +39,7 @@
39
39
  border-radius: var(--cnvs-sys-shape-xxxl, 2rem);
40
40
  max-height: var(--cnvs-popup-card-max-height);
41
41
  overflow-y: auto;
42
- animation-name: animation-rciky;
42
+ animation-name: animation-29kkhp;
43
43
  animation-duration: 150ms;
44
44
  animation-timing-function: ease-out;
45
45
  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-lgjb8 {
39
+ @keyframes animation-g93ne {
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-lgjb8 0.8s linear infinite alternate;
52
+ animation: animation-g93ne 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-pvwm1 {
1
+ @keyframes animation-3s4los {
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: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
24
24
  color: var(--cnvs-sys-color-fg-inverse);
25
- animation-name: animation-pvwm1;
25
+ animation-name: animation-3s4los;
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);