@workday/canvas-kit-css 16.0.0-alpha.0462-next.0 → 16.0.0-alpha.0463-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 (3) hide show
  1. package/action-bar.css +1 -5
  2. package/package.json +2 -2
  3. package/segmented-control.css +43 -21
package/action-bar.css CHANGED
@@ -5,17 +5,13 @@
5
5
  gap: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
6
6
  background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
7
7
  border-block-start: solid 0.0625rem var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
8
- padding: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-500, 2.5rem);
8
+ padding: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
9
9
  position: fixed;
10
10
  inset-block-end: 0;
11
11
  inset-inline: 0;
12
12
  }
13
13
 
14
14
  @media (max-width: 767.5px) {
15
- .cnvs-action-bar-list {
16
- padding: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
17
- }
18
-
19
15
  .cnvs-action-bar-list >* {
20
16
  flex: 1;
21
17
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "16.0.0-alpha.0462-next.0",
3
+ "version": "16.0.0-alpha.0463-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": "d80e8648cba4c3445351b3277c46f5c418f0de93"
29
+ "gitHead": "f21d7cc4d8f56e8a7ffffbb5881aa903f852c025"
30
30
  }
package/segmented-control.css CHANGED
@@ -1,26 +1,26 @@
1
1
  .cnvs-segmented-control-item {
2
2
  box-sizing: border-box;
3
- font-family: var(--cnvs-sys-font-family-default);
4
- font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
5
- line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
6
- letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
7
- font-weight: var(--cnvs-sys-font-weight-bold);
3
+ font-family: var(--cnvs-sys-font-family-default, "Roboto");
4
+ font-weight: var(--cnvs-sys-font-weight-medium);
5
+ line-height: var(--cnvs-sys-line-height-subtext-lg, 1.25rem);
6
+ font-size: var(--cnvs-sys-font-size-subtext-lg, 0.875rem);
7
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);
8
8
  text-align: start;
9
9
  padding-inline: 0;
10
10
  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
11
- --cnvs-button-border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
11
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
12
12
  --cnvs-button-label: var(--cnvs-sys-color-fg-muted-default);
13
13
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-default);
14
14
  }
15
15
 
16
16
  .cnvs-segmented-control-item:hover, .cnvs-segmented-control-item.hover {
17
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
17
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-hover-default);
18
18
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
19
19
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
20
20
  }
21
21
 
22
22
  .cnvs-segmented-control-item:active, .cnvs-segmented-control-item.active {
23
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
23
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-pressed-default);
24
24
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
25
25
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
26
26
  }
@@ -39,9 +39,9 @@
39
39
 
40
40
  .cnvs-segmented-control-item[aria-pressed='true'] {
41
41
  --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
42
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
43
42
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
44
43
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
44
+ box-shadow: var(--cnvs-sys-depth-2);
45
45
  }
46
46
 
47
47
  .cnvs-segmented-control-item[aria-pressed='true']:hover, .cnvs-segmented-control-item[aria-pressed='true'].hover {
@@ -49,6 +49,10 @@
49
49
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
50
50
  }
51
51
 
52
+ .cnvs-segmented-control-item[aria-pressed='true']:focus-visible, .cnvs-segmented-control-item[aria-pressed='true'].focus {
53
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-border-primary);
54
+ }
55
+
52
56
  .cnvs-segmented-control-item[aria-pressed='true']:disabled, .cnvs-segmented-control-item[aria-pressed='true'].disabled {
53
57
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
54
58
  }
@@ -59,13 +63,14 @@
59
63
 
60
64
 
61
65
  .cnvs-segmented-control-item.size-large {
62
- height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
63
- gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
66
+ height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
67
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
64
68
  }
65
69
 
66
70
 
67
71
  .cnvs-segmented-control-item.size-medium {
68
- height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
72
+ height: var(--cnvs-base-size-350, 1.75rem);
73
+ font-weight: var(--cnvs-sys-font-weight-semibold, 600);
69
74
  }
70
75
 
71
76
 
@@ -74,8 +79,9 @@
74
79
  font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
75
80
  line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
76
81
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
77
- font-weight: var(--cnvs-sys-font-weight-bold);
82
+ font-weight: var(--cnvs-sys-font-weight-medium);
78
83
  height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
84
+ gap: var(--cnvs-base-size-25, 0.125rem);
79
85
  }
80
86
 
81
87
 
@@ -83,12 +89,12 @@
83
89
 
84
90
 
85
91
  .cnvs-segmented-control-item.size-large.variant-iconOnly {
86
- min-width: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
92
+ min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
87
93
  }
88
94
 
89
95
 
90
96
  .cnvs-segmented-control-item.size-large.variant-iconWithText {
91
- padding-inline: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
97
+ 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));
92
98
  }
93
99
 
94
100
 
@@ -98,12 +104,12 @@
98
104
 
99
105
 
100
106
  .cnvs-segmented-control-item.size-medium.variant-iconOnly {
101
- min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
107
+ min-width: var(--cnvs-base-size-350, 1.75rem);
102
108
  }
103
109
 
104
110
 
105
111
  .cnvs-segmented-control-item.size-medium.variant-iconWithText {
106
- padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
112
+ padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
107
113
  }
108
114
 
109
115
 
@@ -118,7 +124,7 @@
118
124
 
119
125
 
120
126
  .cnvs-segmented-control-item.size-small.variant-iconWithText {
121
- padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
127
+ padding-inline: var(--cnvs-base-size-75, 0.375rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
122
128
  }
123
129
 
124
130
 
@@ -130,11 +136,27 @@
130
136
  .cnvs-segmented-control-list {
131
137
  box-sizing: border-box;
132
138
  display: inline-grid;
133
- background-color: var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));
139
+ background-color: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
134
140
  border: 0 solid var(--cnvs-sys-color-border-transparent);
135
- border-radius: var(--cnvs-sys-shape-lg, 0.75rem);
141
+ border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
136
142
  padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
137
- grid-gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
143
+ grid-gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
144
+ }
145
+
146
+
147
+ .cnvs-segmented-control-list.size-large {
148
+ padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
149
+ }
150
+
151
+
152
+ .cnvs-segmented-control-list.size-medium {
153
+ padding: var(--cnvs-base-size-25, 0.125rem);
154
+ }
155
+
156
+
157
+ .cnvs-segmented-control-list.size-small {
158
+ padding: var(--cnvs-base-size-25, 0.125rem);
159
+ gap: var(--cnvs-base-size-25, 0.125rem);
138
160
  }
139
161
 
140
162