@workday/canvas-kit-css 15.0.0-alpha.0008-next.0 → 15.0.0-alpha.0023-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 (9) hide show
  1. package/badge.css +2 -2
  2. package/loading-dots.css +2 -2
  3. package/modal.css +2 -2
  4. package/package.json +2 -2
  5. package/pagination.css +9 -0
  6. package/popup.css +2 -2
  7. package/segmented-control.css +122 -44
  8. package/skeleton.css +2 -2
  9. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-mr8lf {
1
+ @keyframes animation-2m35wk {
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-mr8lf 0.2s ease;
15
+ animation: animation-2m35wk 0.2s ease;
16
16
  border-radius: var(--cnvs-sys-shape-round);
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-1qnc1w {
1
+ @keyframes animation-1ah4o7 {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -38,7 +38,7 @@
38
38
  outline: 0.125rem solid transparent;
39
39
  transform: scale(0);
40
40
  display: inline-block;
41
- animation-name: animation-1qnc1w;
41
+ animation-name: animation-1ah4o7;
42
42
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
43
43
  animation-iteration-count: infinite;
44
44
  animation-timing-function: ease-in-out;
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-15tqfd {
1
+ @keyframes animation-16x51s {
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-15tqfd;
21
+ animation-name: animation-16x51s;
22
22
  }
23
23
 
24
24
  .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": "15.0.0-alpha.0008-next.0",
3
+ "version": "15.0.0-alpha.0023-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
28
+ "gitHead": "13b3abf5b4752be5738a78f3c37e31b6252077dc"
29
29
  }
package/pagination.css CHANGED
@@ -6,6 +6,15 @@
6
6
  }
7
7
 
8
8
 
9
+ .cnvs-control-button {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ .cnvs-control-button:dir(rtl) .wd-icon {
14
+ transform: scaleX(-1);
15
+ }
16
+
17
+
9
18
  .cnvs-pagination-list {
10
19
  box-sizing: border-box;
11
20
  display: flex;
package/popup.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
 
6
- @keyframes animation-2oodhh {
6
+ @keyframes animation-1qqskg {
7
7
  0% {
8
8
  opacity: 1;
9
9
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -31,7 +31,7 @@
31
31
  padding: var(--cnvs-sys-space-x6);
32
32
  max-height: var(--cnvs-popup-card-max-height);
33
33
  overflow-y: auto;
34
- animation-name: animation-2oodhh;
34
+ animation-name: animation-1qqskg;
35
35
  animation-duration: 150ms;
36
36
  animation-timing-function: ease-out;
37
37
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/segmented-control.css CHANGED
@@ -1,75 +1,153 @@
1
- .cnvs-segmented-control-button {
1
+ .cnvs-segmented-control-list {
2
2
  box-sizing: border-box;
3
- border-inline-start: none;
4
- min-width: auto;
5
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
6
- --cnvs-button-border: var(--cnvs-sys-color-border-container);
7
- --cnvs-button-border-radius: var(--cnvs-sys-shape-zero);
8
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
3
+ display: inline-grid;
4
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
5
+ border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
6
+ border-radius: var(--cnvs-sys-shape-x2);
7
+ padding: 0.1875rem;
8
+ grid-gap: var(--cnvs-sys-space-x2);
9
+ }
10
+
11
+
12
+ .cnvs-segmented-control-list.disabled {
13
+ opacity: var(--cnvs-sys-opacity-disabled);
9
14
  }
10
15
 
11
- .cnvs-segmented-control-button:hover, .cnvs-segmented-control-button.hover {
12
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
13
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
16
+
17
+ .cnvs-segmented-control-list.orientation-vertical {
18
+ grid-template-rows: repeat(var(--cnvs-segmented-control-list-items), 1fr);
14
19
  }
15
20
 
16
- .cnvs-segmented-control-button:active, .cnvs-segmented-control-button.active {
17
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
21
+
22
+ .cnvs-segmented-control-list.orientation-horizontal {
23
+ grid-template-columns: repeat(var(--cnvs-segmented-control-list-items), 1fr);
18
24
  }
19
25
 
20
- .cnvs-segmented-control-button:disabled, .cnvs-segmented-control-button.disabled {
21
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
22
- --cnvs-button-border: var(--cnvs-sys-color-border-container);
23
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
26
+
27
+ .cnvs-segmented-control-item {
28
+ box-sizing: border-box;
29
+ font-family: var(--cnvs-sys-font-family-default);
30
+ font-weight: var(--cnvs-sys-font-weight-bold);
31
+ line-height: var(--cnvs-sys-line-height-subtext-large);
32
+ font-size: var(--cnvs-sys-font-size-subtext-large);
33
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
34
+ text-align: start;
35
+ padding-inline: var(--cnvs-sys-space-zero);
36
+ gap: var(--cnvs-sys-space-x1);
37
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
38
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
39
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
24
40
  }
25
41
 
26
- .cnvs-segmented-control-button:first-of-type {
27
- border-radius: var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);
28
- border-inline-start: 0.0625rem solid var(--cnvs-sys-color-border-container);
42
+ .cnvs-segmented-control-item:hover, .cnvs-segmented-control-item.hover {
43
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
44
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
45
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
29
46
  }
30
47
 
31
- .cnvs-segmented-control-button:last-of-type {
32
- border-radius: 0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;
48
+ .cnvs-segmented-control-item:active, .cnvs-segmented-control-item.active {
49
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
50
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
51
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
33
52
  }
34
53
 
35
- .cnvs-segmented-control-button[aria-pressed="true"] {
36
- --cnvs-button-background: var(--cnvs-brand-primary-base);
37
- --cnvs-button-border: var(--cnvs-brand-primary-base);
38
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
54
+ .cnvs-segmented-control-item:focus-visible, .cnvs-segmented-control-item.focus {
55
+ --cnvs-button-label: var(--cnvs-sys-color-fg-muted-strong);
56
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
39
57
  }
40
58
 
41
- .cnvs-segmented-control-button[aria-pressed="true"]:first-of-type {
42
- border-inline-start-color: var(--cnvs-brand-primary-base);
59
+ .cnvs-segmented-control-item:disabled, .cnvs-segmented-control-item.disabled {
60
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
43
61
  }
44
62
 
45
- .cnvs-segmented-control-button[aria-pressed="true"]:disabled, .cnvs-segmented-control-button[aria-pressed="true"].disabled {
46
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
47
- --cnvs-button-border: var(--cnvs-sys-color-border-container);
48
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
63
+ .cnvs-segmented-control-item[aria-pressed='true'] {
64
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
65
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
66
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
67
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
49
68
  }
50
69
 
51
- .cnvs-segmented-control-button:focus-visible, .cnvs-segmented-control-button.focus {
52
- border-radius: var(--cnvs-sys-shape-x1);
53
- z-index: 1;
54
- animation: none;
55
- transition: all 120ms border-radius 1ms;
70
+ .cnvs-segmented-control-item[aria-pressed='true']:hover, .cnvs-segmented-control-item[aria-pressed='true'].hover {
71
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
72
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
56
73
  }
57
74
 
75
+ .cnvs-segmented-control-item[aria-pressed='true']:disabled, .cnvs-segmented-control-item[aria-pressed='true'].disabled {
76
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
77
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
78
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
79
+ }
58
80
 
59
- .cnvs-segmented-control-button.segmented-control-button-size-small {
60
- width: var(--cnvs-sys-space-x8);
61
- height: var(--cnvs-sys-space-x8);
81
+ .cnvs-segmented-control-item :dir(rtl) svg {
82
+ transform: scaleX(-1);
62
83
  }
63
84
 
64
85
 
65
- .cnvs-segmented-control-button.segmented-control-button-size-medium {
66
- width: var(--cnvs-sys-space-x10);
86
+ .cnvs-segmented-control-item.size-large {
67
87
  height: var(--cnvs-sys-space-x10);
88
+ gap: var(--cnvs-sys-space-x2);
89
+ }
90
+
91
+
92
+ .cnvs-segmented-control-item.size-medium {
93
+ height: var(--cnvs-sys-space-x8);
94
+ }
95
+
96
+
97
+ .cnvs-segmented-control-item.size-small {
98
+ font-family: var(--cnvs-sys-font-family-default);
99
+ font-weight: var(--cnvs-sys-font-weight-bold);
100
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
101
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
102
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
103
+ height: var(--cnvs-sys-space-x6);
104
+ }
105
+
106
+
107
+
108
+
109
+
110
+ .cnvs-segmented-control-item.size-large.variant-iconOnly {
111
+ min-width: var(--cnvs-sys-space-x10);
112
+ }
113
+
114
+
115
+ .cnvs-segmented-control-item.size-large.variant-iconWithText {
116
+ padding-inline: 1.25rem var(--cnvs-sys-space-x6);
117
+ }
118
+
119
+
120
+ .cnvs-segmented-control-item.size-large.variant-textOnly {
121
+ padding-inline: var(--cnvs-sys-space-x6);
122
+ }
123
+
124
+
125
+ .cnvs-segmented-control-item.size-medium.variant-iconOnly {
126
+ min-width: var(--cnvs-sys-space-x8);
127
+ }
128
+
129
+
130
+ .cnvs-segmented-control-item.size-medium.variant-iconWithText {
131
+ padding-inline: var(--cnvs-sys-space-x4) 1.25rem;
132
+ }
133
+
134
+
135
+ .cnvs-segmented-control-item.size-medium.variant-textOnly {
136
+ padding-inline: 1.25rem;
137
+ }
138
+
139
+
140
+ .cnvs-segmented-control-item.size-small.variant-iconOnly {
141
+ min-width: var(--cnvs-sys-space-x6);
142
+ }
143
+
144
+
145
+ .cnvs-segmented-control-item.size-small.variant-iconWithText {
146
+ padding-inline: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);
68
147
  }
69
148
 
70
149
 
71
- .cnvs-segmented-control-button.segmented-control-button-size-large {
72
- width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
73
- height: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
150
+ .cnvs-segmented-control-item.size-small.variant-textOnly {
151
+ padding-inline: var(--cnvs-sys-space-x3);
74
152
  }
75
153
 
package/skeleton.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
 
39
- @keyframes animation-2t9yiq {
39
+ @keyframes animation-3ekbpx {
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-2t9yiq 0.8s linear infinite alternate;
52
+ animation: animation-3ekbpx 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-14lr2r {
1
+ @keyframes animation-yco6h {
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-space-x3);
24
24
  color: var(--cnvs-sys-color-text-inverse);
25
- animation-name: animation-14lr2r;
25
+ animation-name: animation-yco6h;
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);