@workday/canvas-kit-css 15.0.0-alpha.0075-next.0 → 15.0.0-alpha.0077-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 (2) hide show
  1. package/avatar.css +100 -98
  2. package/package.json +2 -2
package/avatar.css CHANGED
@@ -1,128 +1,139 @@
1
- .cnvs-avatar {
1
+ .cnvs-avatar-image {
2
2
  box-sizing: border-box;
3
- background: var(--cnvs-sys-color-bg-caution-default);
4
- position: relative;
5
- display: flex;
6
- align-items: center;
7
- justify-content: center;
8
- padding: 0;
9
- border: 0;
10
- overflow: hidden;
11
- cursor: default;
12
- pointer-events: none;
13
- border-radius: var(--cnvs-sys-shape-round);
14
- width: var(--cnvs-avatar-size);
15
- height: var(--cnvs-avatar-size);
3
+ height: 100%;
4
+ width: 100%;
5
+ object-fit: cover;
16
6
  }
17
7
 
18
- .cnvs-avatar:focus-visible, .cnvs-avatar.focus {
19
- outline: none;
20
- box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
21
- }
22
8
 
23
- .cnvs-avatar :is(button) {
24
- cursor: pointer;
25
- pointer-events: auto;
9
+ .cnvs-avatar-name {
10
+ box-sizing: border-box;
11
+ text-transform: uppercase;
12
+ cursor: default;
26
13
  }
27
14
 
28
- .cnvs-avatar:disabled, .cnvs-avatar.disabled {
29
- opacity: var(--cnvs-sys-opacity-disabled);
30
- }
31
15
 
32
- .cnvs-avatar [data-part="avatar-icon"] {
33
- transition: opacity 150ms linear;
16
+ .cnvs-base-avatar {
17
+ box-sizing: border-box;
18
+ border-radius: var(--cnvs-sys-shape-round);
19
+ width: var(--cnvs-base-avatar-size, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));
20
+ height: var(--cnvs-base-avatar-size, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));
21
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300));
22
+ color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800));
34
23
  display: flex;
35
24
  align-items: center;
36
25
  justify-content: center;
37
- --cnvs-svg-size: calc(var(--cnvs-avatar-size) * 0.625);
38
- opacity: 1;
39
- }
40
-
41
- .cnvs-avatar [data-part="avatar-image"] {
42
- position: absolute;
43
- width: 100%;
44
- height: 100%;
45
- border-radius: 999px;
46
- transition: opacity 150ms linear;
47
- opacity: 0;
26
+ overflow: hidden;
27
+ border: none;
28
+ font-family: var(--cnvs-sys-font-family-default);
29
+ font-weight: var(--cnvs-sys-font-weight-normal);
30
+ line-height: var(--cnvs-sys-line-height-body-medium);
31
+ font-size: var(--cnvs-sys-font-size-body-medium);
48
32
  }
49
33
 
50
34
 
51
- .cnvs-avatar.variant-light {
52
- background-color: var(--cnvs-sys-color-bg-alt-default);
35
+ .cnvs-base-avatar.variant-blue {
36
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300));
37
+ color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800));
53
38
  }
54
39
 
55
- .cnvs-avatar.variant-light [data-part="avatar-icon"] {
56
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
57
- }
58
-
59
-
60
- .cnvs-avatar.variant-dark {
61
- background-color: var(--cnvs-sys-color-bg-primary-default);
62
- }
63
40
 
64
- .cnvs-avatar.variant-dark [data-part="avatar-icon"] {
65
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
41
+ .cnvs-base-avatar.variant-amber {
42
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-amber-200));
43
+ color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-amber-700));
66
44
  }
67
45
 
68
46
 
69
- .cnvs-avatar.size-extra-small {
70
- width: var(--cnvs-sys-space-x4);
71
- height: var(--cnvs-sys-space-x4);
47
+ .cnvs-base-avatar.variant-teal {
48
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-teal-300));
49
+ color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-teal-800));
72
50
  }
73
51
 
74
- .cnvs-avatar.size-extra-small [data-part="avatar-icon"] {
75
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x4) * 0.625);
52
+
53
+ .cnvs-base-avatar.variant-purple {
54
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-purple-300));
55
+ color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-purple-800));
76
56
  }
77
57
 
78
58
 
79
- .cnvs-avatar.size-small {
80
- width: var(--cnvs-sys-space-x6);
81
- height: var(--cnvs-sys-space-x6);
59
+ .cnvs-base-avatar.size-extra-extra-small {
60
+ --cnvs-base-avatar-size: var(--cnvs-sys-space-x6);
61
+ font-family: var(--cnvs-sys-font-family-default);
62
+ font-weight: var(--cnvs-sys-font-weight-normal);
63
+ line-height: var(--cnvs-sys-line-height-subtext-small);
64
+ font-size: var(--cnvs-sys-font-size-subtext-small);
65
+ letter-spacing: var(--cnvs-base-letter-spacing-50);
82
66
  }
83
67
 
84
- .cnvs-avatar.size-small [data-part="avatar-icon"] {
85
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x6) * 0.625);
68
+
69
+ .cnvs-base-avatar.size-extra-small {
70
+ --cnvs-base-avatar-size: var(--cnvs-sys-space-x8);
71
+ font-family: var(--cnvs-sys-font-family-default);
72
+ font-weight: var(--cnvs-sys-font-weight-normal);
73
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
74
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
75
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
86
76
  }
87
77
 
88
78
 
89
- .cnvs-avatar.size-medium {
90
- width: var(--cnvs-sys-space-x8);
91
- height: var(--cnvs-sys-space-x8);
79
+ .cnvs-base-avatar.size-small {
80
+ --cnvs-base-avatar-size: var(--cnvs-sys-space-x10);
81
+ font-family: var(--cnvs-sys-font-family-default);
82
+ font-weight: var(--cnvs-sys-font-weight-normal);
83
+ line-height: var(--cnvs-sys-line-height-body-small);
84
+ font-size: var(--cnvs-sys-font-size-body-small);
85
+ letter-spacing: var(--cnvs-base-letter-spacing-200);
92
86
  }
93
87
 
94
- .cnvs-avatar.size-medium [data-part="avatar-icon"] {
95
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x8) * 0.625);
88
+
89
+ .cnvs-base-avatar.size-medium {
90
+ --cnvs-base-avatar-size: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
91
+ font-family: var(--cnvs-sys-font-family-default);
92
+ font-weight: var(--cnvs-sys-font-weight-normal);
93
+ line-height: var(--cnvs-sys-line-height-body-medium);
94
+ font-size: var(--cnvs-sys-font-size-body-medium);
96
95
  }
97
96
 
98
97
 
99
- .cnvs-avatar.size-large {
100
- width: var(--cnvs-sys-space-x10);
101
- height: var(--cnvs-sys-space-x10);
98
+ .cnvs-base-avatar.size-large {
99
+ --cnvs-base-avatar-size: calc(var(--cnvs-sys-space-x16) + var(--cnvs-sys-space-x2));
100
+ font-family: var(--cnvs-sys-font-family-default);
101
+ font-weight: var(--cnvs-sys-font-weight-bold);
102
+ line-height: var(--cnvs-sys-line-height-heading-medium);
103
+ font-size: var(--cnvs-sys-font-size-heading-medium);
102
104
  }
103
105
 
104
- .cnvs-avatar.size-large [data-part="avatar-icon"] {
105
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x10) * 0.625);
106
+
107
+ .cnvs-base-avatar.size-extra-large {
108
+ --cnvs-base-avatar-size: calc(var(--cnvs-sys-space-x20) + var(--cnvs-sys-space-x4));
109
+ font-family: var(--cnvs-sys-font-family-default);
110
+ font-weight: var(--cnvs-sys-font-weight-bold);
111
+ line-height: var(--cnvs-sys-line-height-title-small);
112
+ font-size: var(--cnvs-sys-font-size-title-small);
106
113
  }
107
114
 
108
115
 
109
- .cnvs-avatar.size-extra-large {
110
- width: var(--cnvs-sys-space-x16);
111
- height: var(--cnvs-sys-space-x16);
116
+ .cnvs-base-avatar.size-extra-extra-large {
117
+ --cnvs-base-avatar-size: calc(var(--cnvs-sys-space-x10) * 3);
118
+ font-family: var(--cnvs-sys-font-family-default);
119
+ font-weight: var(--cnvs-sys-font-weight-bold);
120
+ line-height: var(--cnvs-sys-line-height-title-medium);
121
+ font-size: var(--cnvs-sys-font-size-title-medium);
112
122
  }
113
123
 
114
- .cnvs-avatar.size-extra-large [data-part="avatar-icon"] {
115
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x16) * 0.625);
124
+
125
+ .cnvs-avatar {
126
+ box-sizing: border-box;
116
127
  }
117
128
 
118
129
 
119
- .cnvs-avatar.size-extra-extra-large {
120
- width: calc(var(--cnvs-sys-space-x10) * 3);
121
- height: calc(var(--cnvs-sys-space-x10) * 3);
130
+ .cnvs-avatar.image-loaded-false [data-part="avatar-image"] {
131
+ display: none;
122
132
  }
123
133
 
124
- .cnvs-avatar.size-extra-extra-large [data-part="avatar-icon"] {
125
- --cnvs-svg-size: calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);
134
+
135
+ .cnvs-avatar.image-loaded {
136
+ background-color: var(--cnvs-sys-color-bg-default);
126
137
  }
127
138
 
128
139
 
@@ -131,18 +142,13 @@
131
142
  }
132
143
 
133
144
 
134
- .cnvs-avatar.object-fit-fill [data-part="avatar-image"] {
135
- object-fit: fill;
136
- }
137
-
138
-
139
145
  .cnvs-avatar.object-fit-cover [data-part="avatar-image"] {
140
146
  object-fit: cover;
141
147
  }
142
148
 
143
149
 
144
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
145
- object-fit: scale-down;
150
+ .cnvs-avatar.object-fit-fill [data-part="avatar-image"] {
151
+ object-fit: fill;
146
152
  }
147
153
 
148
154
 
@@ -152,35 +158,31 @@
152
158
 
153
159
 
154
160
  .cnvs-avatar.object-fit [data-part="avatar-image"] {
155
- object-fit: -moz-initial;
161
+ object-fit: scale-down;
156
162
  }
157
163
 
158
164
 
159
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
165
+ .cnvs-avatar.object-fit-initial [data-part="avatar-image"] {
160
166
  object-fit: initial;
161
167
  }
162
168
 
163
169
 
164
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
170
+ .cnvs-avatar.object-fit-inherit [data-part="avatar-image"] {
165
171
  object-fit: inherit;
166
172
  }
167
173
 
168
174
 
169
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
170
- object-fit: revert;
175
+ .cnvs-avatar.object-fit-unset [data-part="avatar-image"] {
176
+ object-fit: unset;
171
177
  }
172
178
 
173
179
 
174
180
  .cnvs-avatar.object-fit [data-part="avatar-image"] {
175
- object-fit: unset;
181
+ object-fit: -moz-initial;
176
182
  }
177
183
 
178
184
 
179
- .cnvs-avatar.is-image-loaded [data-part="avatar-icon"] {
180
- opacity: 0;
181
- }
182
-
183
- .cnvs-avatar.is-image-loaded [data-part="avatar-image"] {
184
- opacity: 1;
185
+ .cnvs-avatar.object-fit [data-part="avatar-image"] {
186
+ object-fit: revert;
185
187
  }
186
188
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "15.0.0-alpha.0075-next.0",
3
+ "version": "15.0.0-alpha.0077-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": "85c5dfa329d29263f96a49be74ef55f551990c7b"
28
+ "gitHead": "6944d028b6f1250481ad8c4f8d5f817bea4e01a1"
29
29
  }