@revikornmann/muka-ui 0.27.2 → 0.27.3
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.
- package/dist/cjs/components/Avatar/Avatar.css +30 -7
- package/dist/cjs/components/Avatar/Avatar.js +4 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.css +30 -7
- package/dist/esm/components/Avatar/Avatar.js +4 -1
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/styles/components/Avatar.css +30 -7
- package/dist/styles/index.css +648 -618
- package/dist/styles/muka-dark.css +648 -618
- package/dist/styles/muka-light.css +648 -618
- package/dist/styles/tokens-bouwplan-dark.css +8 -1
- package/dist/styles/tokens-bouwplan-light.css +8 -1
- package/dist/styles/tokens-fscl-dark.css +8 -1
- package/dist/styles/tokens-fscl-light.css +8 -1
- package/dist/styles/tokens-grip-dark.css +8 -1
- package/dist/styles/tokens-grip-light.css +8 -1
- package/dist/styles/tokens-muka-dark.css +8 -1
- package/dist/styles/tokens-muka-light.css +8 -1
- package/dist/styles/tokens-wireframe-dark.css +8 -1
- package/dist/styles/tokens-wireframe-light.css +8 -1
- package/dist/styles/wireframe-dark.css +648 -618
- package/dist/styles/wireframe-light.css +648 -618
- package/dist/types/components/Avatar/Avatar.d.ts +4 -1
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/docs/consumers/brand.md +6 -2
- package/docs/consumers/setup-instructions.md +35 -3
- package/package.json +1 -1
- package/skills/setup-muka/SKILL.md +36 -3
- package/tokens/t4-components/avatar.json +33 -1
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
flex-shrink: 0;
|
|
10
|
-
overflow:
|
|
10
|
+
/* No overflow clipping: the status dot sits on the edge. The image and the
|
|
11
|
+
loading shimmer round themselves to the avatar shape instead. */
|
|
11
12
|
user-select: none;
|
|
12
13
|
vertical-align: middle;
|
|
13
14
|
background-color: var(--avatar-color-background-default);
|
|
@@ -80,9 +81,10 @@
|
|
|
80
81
|
border-radius: var(--avatar-radius-square-sm);
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
/* 4xs is too small for initials, the fallback icon or a status dot:
|
|
84
|
+
/* 4xs is too small for initials, an icon, the fallback icon or a status dot:
|
|
84
85
|
it shows the picture, or the plain background */
|
|
85
86
|
.muka-avatar--4xs .muka-avatar__initials,
|
|
87
|
+
.muka-avatar--4xs .muka-avatar__icon,
|
|
86
88
|
.muka-avatar--4xs .muka-avatar__fallback,
|
|
87
89
|
.muka-avatar--4xs .muka-avatar__status {
|
|
88
90
|
display: none;
|
|
@@ -118,38 +120,59 @@
|
|
|
118
120
|
.muka-avatar__skeleton {
|
|
119
121
|
position: absolute;
|
|
120
122
|
inset: 0;
|
|
123
|
+
border-radius: inherit;
|
|
121
124
|
background: linear-gradient(
|
|
122
125
|
90deg,
|
|
123
126
|
transparent 0%,
|
|
124
127
|
var(--color-surface-level1) 50%,
|
|
125
128
|
transparent 100%
|
|
126
|
-
);
|
|
129
|
+
) no-repeat;
|
|
130
|
+
background-size: 50% 100%;
|
|
127
131
|
animation: avatar-loading 1.5s ease-in-out infinite;
|
|
128
132
|
}
|
|
129
133
|
|
|
134
|
+
/* The highlight sweeps by background position, so it stays inside the
|
|
135
|
+
rounded shape without the avatar clipping its overflow */
|
|
130
136
|
@keyframes avatar-loading {
|
|
131
137
|
0% {
|
|
132
|
-
|
|
138
|
+
background-position: -100% 0;
|
|
133
139
|
}
|
|
134
140
|
100% {
|
|
135
|
-
|
|
141
|
+
background-position: 200% 0;
|
|
136
142
|
}
|
|
137
143
|
}
|
|
138
144
|
|
|
139
145
|
/* Avatar content */
|
|
140
146
|
.muka-avatar__image {
|
|
147
|
+
border-radius: inherit;
|
|
141
148
|
width: 100%;
|
|
142
149
|
height: 100%;
|
|
143
150
|
object-fit: cover;
|
|
144
151
|
display: block;
|
|
145
152
|
}
|
|
146
153
|
|
|
154
|
+
/* Icon slot: a fixed icon size per avatar size, in the initials colour
|
|
155
|
+
(subtle text) */
|
|
147
156
|
.muka-avatar__icon {
|
|
148
|
-
width: 60%;
|
|
149
|
-
height: 60%;
|
|
150
157
|
display: flex;
|
|
151
158
|
align-items: center;
|
|
152
159
|
justify-content: center;
|
|
160
|
+
color: var(--avatar-color-foreground-default);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.muka-avatar--3xs .muka-avatar__icon { width: var(--avatar-icon-size-3xs); height: var(--avatar-icon-size-3xs); }
|
|
164
|
+
.muka-avatar--2xs .muka-avatar__icon { width: var(--avatar-icon-size-2xs); height: var(--avatar-icon-size-2xs); }
|
|
165
|
+
.muka-avatar--xs .muka-avatar__icon { width: var(--avatar-icon-size-xs); height: var(--avatar-icon-size-xs); }
|
|
166
|
+
.muka-avatar--sm .muka-avatar__icon { width: var(--avatar-icon-size-sm); height: var(--avatar-icon-size-sm); }
|
|
167
|
+
.muka-avatar--md .muka-avatar__icon { width: var(--avatar-icon-size-md); height: var(--avatar-icon-size-md); }
|
|
168
|
+
.muka-avatar--lg .muka-avatar__icon { width: var(--avatar-icon-size-lg); height: var(--avatar-icon-size-lg); }
|
|
169
|
+
.muka-avatar--xl .muka-avatar__icon { width: var(--avatar-icon-size-xl); height: var(--avatar-icon-size-xl); }
|
|
170
|
+
|
|
171
|
+
/* A Muka Icon fills the slot and takes its colour (its own `color` prop still wins) */
|
|
172
|
+
.muka-avatar__icon .muka-icon {
|
|
173
|
+
width: 100%;
|
|
174
|
+
height: 100%;
|
|
175
|
+
color: inherit;
|
|
153
176
|
}
|
|
154
177
|
|
|
155
178
|
.muka-avatar__icon svg {
|
|
@@ -32,7 +32,10 @@ function getInitials(name) {
|
|
|
32
32
|
* - Loading and error states
|
|
33
33
|
* - Clickable support
|
|
34
34
|
*
|
|
35
|
-
* @accessibility WCAG 2.1 AA
|
|
35
|
+
* @accessibility WCAG 2.1 AA, except initials contrast
|
|
36
|
+
* - Initials and "+N" use subtle text by design (Figma "Avatar"), about 2.5–3.4:1
|
|
37
|
+
* on the avatar fill, below the 4.5:1 AA text minimum. They are decorative:
|
|
38
|
+
* the accessible name comes from `name`, so always pass it
|
|
36
39
|
* - Requires alt text when using image
|
|
37
40
|
* - Uses role="img" with aria-label for non-image avatars
|
|
38
41
|
* - Status indicators include aria-label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAA2D;AAC3D,6DAAgE;AAChE,wBAAsB;AA2CtB;;GAEG;AACH,SAAS,WAAW,CAAC,IAAY;IAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IACD,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAChF,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
flex-shrink: 0;
|
|
10
|
-
overflow:
|
|
10
|
+
/* No overflow clipping: the status dot sits on the edge. The image and the
|
|
11
|
+
loading shimmer round themselves to the avatar shape instead. */
|
|
11
12
|
user-select: none;
|
|
12
13
|
vertical-align: middle;
|
|
13
14
|
background-color: var(--avatar-color-background-default);
|
|
@@ -80,9 +81,10 @@
|
|
|
80
81
|
border-radius: var(--avatar-radius-square-sm);
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
/* 4xs is too small for initials, the fallback icon or a status dot:
|
|
84
|
+
/* 4xs is too small for initials, an icon, the fallback icon or a status dot:
|
|
84
85
|
it shows the picture, or the plain background */
|
|
85
86
|
.muka-avatar--4xs .muka-avatar__initials,
|
|
87
|
+
.muka-avatar--4xs .muka-avatar__icon,
|
|
86
88
|
.muka-avatar--4xs .muka-avatar__fallback,
|
|
87
89
|
.muka-avatar--4xs .muka-avatar__status {
|
|
88
90
|
display: none;
|
|
@@ -118,38 +120,59 @@
|
|
|
118
120
|
.muka-avatar__skeleton {
|
|
119
121
|
position: absolute;
|
|
120
122
|
inset: 0;
|
|
123
|
+
border-radius: inherit;
|
|
121
124
|
background: linear-gradient(
|
|
122
125
|
90deg,
|
|
123
126
|
transparent 0%,
|
|
124
127
|
var(--color-surface-level1) 50%,
|
|
125
128
|
transparent 100%
|
|
126
|
-
);
|
|
129
|
+
) no-repeat;
|
|
130
|
+
background-size: 50% 100%;
|
|
127
131
|
animation: avatar-loading 1.5s ease-in-out infinite;
|
|
128
132
|
}
|
|
129
133
|
|
|
134
|
+
/* The highlight sweeps by background position, so it stays inside the
|
|
135
|
+
rounded shape without the avatar clipping its overflow */
|
|
130
136
|
@keyframes avatar-loading {
|
|
131
137
|
0% {
|
|
132
|
-
|
|
138
|
+
background-position: -100% 0;
|
|
133
139
|
}
|
|
134
140
|
100% {
|
|
135
|
-
|
|
141
|
+
background-position: 200% 0;
|
|
136
142
|
}
|
|
137
143
|
}
|
|
138
144
|
|
|
139
145
|
/* Avatar content */
|
|
140
146
|
.muka-avatar__image {
|
|
147
|
+
border-radius: inherit;
|
|
141
148
|
width: 100%;
|
|
142
149
|
height: 100%;
|
|
143
150
|
object-fit: cover;
|
|
144
151
|
display: block;
|
|
145
152
|
}
|
|
146
153
|
|
|
154
|
+
/* Icon slot: a fixed icon size per avatar size, in the initials colour
|
|
155
|
+
(subtle text) */
|
|
147
156
|
.muka-avatar__icon {
|
|
148
|
-
width: 60%;
|
|
149
|
-
height: 60%;
|
|
150
157
|
display: flex;
|
|
151
158
|
align-items: center;
|
|
152
159
|
justify-content: center;
|
|
160
|
+
color: var(--avatar-color-foreground-default);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.muka-avatar--3xs .muka-avatar__icon { width: var(--avatar-icon-size-3xs); height: var(--avatar-icon-size-3xs); }
|
|
164
|
+
.muka-avatar--2xs .muka-avatar__icon { width: var(--avatar-icon-size-2xs); height: var(--avatar-icon-size-2xs); }
|
|
165
|
+
.muka-avatar--xs .muka-avatar__icon { width: var(--avatar-icon-size-xs); height: var(--avatar-icon-size-xs); }
|
|
166
|
+
.muka-avatar--sm .muka-avatar__icon { width: var(--avatar-icon-size-sm); height: var(--avatar-icon-size-sm); }
|
|
167
|
+
.muka-avatar--md .muka-avatar__icon { width: var(--avatar-icon-size-md); height: var(--avatar-icon-size-md); }
|
|
168
|
+
.muka-avatar--lg .muka-avatar__icon { width: var(--avatar-icon-size-lg); height: var(--avatar-icon-size-lg); }
|
|
169
|
+
.muka-avatar--xl .muka-avatar__icon { width: var(--avatar-icon-size-xl); height: var(--avatar-icon-size-xl); }
|
|
170
|
+
|
|
171
|
+
/* A Muka Icon fills the slot and takes its colour (its own `color` prop still wins) */
|
|
172
|
+
.muka-avatar__icon .muka-icon {
|
|
173
|
+
width: 100%;
|
|
174
|
+
height: 100%;
|
|
175
|
+
color: inherit;
|
|
153
176
|
}
|
|
154
177
|
|
|
155
178
|
.muka-avatar__icon svg {
|
|
@@ -29,7 +29,10 @@ function getInitials(name) {
|
|
|
29
29
|
* - Loading and error states
|
|
30
30
|
* - Clickable support
|
|
31
31
|
*
|
|
32
|
-
* @accessibility WCAG 2.1 AA
|
|
32
|
+
* @accessibility WCAG 2.1 AA, except initials contrast
|
|
33
|
+
* - Initials and "+N" use subtle text by design (Figma "Avatar"), about 2.5–3.4:1
|
|
34
|
+
* on the avatar fill, below the 4.5:1 AA text minimum. They are decorative:
|
|
35
|
+
* the accessible name comes from `name`, so always pass it
|
|
33
36
|
* - Requires alt text when using image
|
|
34
37
|
* - Uses role="img" with aria-label for non-image avatars
|
|
35
38
|
* - Status indicators include aria-label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,cAAc,CAAC;AA2CtB;;GAEG;AACH,SAAS,WAAW,CAAC,IAAY;IAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IACD,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAChF,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
flex-shrink: 0;
|
|
10
|
-
overflow:
|
|
10
|
+
/* No overflow clipping: the status dot sits on the edge. The image and the
|
|
11
|
+
loading shimmer round themselves to the avatar shape instead. */
|
|
11
12
|
user-select: none;
|
|
12
13
|
vertical-align: middle;
|
|
13
14
|
background-color: var(--avatar-color-background-default);
|
|
@@ -80,9 +81,10 @@
|
|
|
80
81
|
border-radius: var(--avatar-radius-square-sm);
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
/* 4xs is too small for initials, the fallback icon or a status dot:
|
|
84
|
+
/* 4xs is too small for initials, an icon, the fallback icon or a status dot:
|
|
84
85
|
it shows the picture, or the plain background */
|
|
85
86
|
.muka-avatar--4xs .muka-avatar__initials,
|
|
87
|
+
.muka-avatar--4xs .muka-avatar__icon,
|
|
86
88
|
.muka-avatar--4xs .muka-avatar__fallback,
|
|
87
89
|
.muka-avatar--4xs .muka-avatar__status {
|
|
88
90
|
display: none;
|
|
@@ -118,38 +120,59 @@
|
|
|
118
120
|
.muka-avatar__skeleton {
|
|
119
121
|
position: absolute;
|
|
120
122
|
inset: 0;
|
|
123
|
+
border-radius: inherit;
|
|
121
124
|
background: linear-gradient(
|
|
122
125
|
90deg,
|
|
123
126
|
transparent 0%,
|
|
124
127
|
var(--color-surface-level1) 50%,
|
|
125
128
|
transparent 100%
|
|
126
|
-
);
|
|
129
|
+
) no-repeat;
|
|
130
|
+
background-size: 50% 100%;
|
|
127
131
|
animation: avatar-loading 1.5s ease-in-out infinite;
|
|
128
132
|
}
|
|
129
133
|
|
|
134
|
+
/* The highlight sweeps by background position, so it stays inside the
|
|
135
|
+
rounded shape without the avatar clipping its overflow */
|
|
130
136
|
@keyframes avatar-loading {
|
|
131
137
|
0% {
|
|
132
|
-
|
|
138
|
+
background-position: -100% 0;
|
|
133
139
|
}
|
|
134
140
|
100% {
|
|
135
|
-
|
|
141
|
+
background-position: 200% 0;
|
|
136
142
|
}
|
|
137
143
|
}
|
|
138
144
|
|
|
139
145
|
/* Avatar content */
|
|
140
146
|
.muka-avatar__image {
|
|
147
|
+
border-radius: inherit;
|
|
141
148
|
width: 100%;
|
|
142
149
|
height: 100%;
|
|
143
150
|
object-fit: cover;
|
|
144
151
|
display: block;
|
|
145
152
|
}
|
|
146
153
|
|
|
154
|
+
/* Icon slot: a fixed icon size per avatar size, in the initials colour
|
|
155
|
+
(subtle text) */
|
|
147
156
|
.muka-avatar__icon {
|
|
148
|
-
width: 60%;
|
|
149
|
-
height: 60%;
|
|
150
157
|
display: flex;
|
|
151
158
|
align-items: center;
|
|
152
159
|
justify-content: center;
|
|
160
|
+
color: var(--avatar-color-foreground-default);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.muka-avatar--3xs .muka-avatar__icon { width: var(--avatar-icon-size-3xs); height: var(--avatar-icon-size-3xs); }
|
|
164
|
+
.muka-avatar--2xs .muka-avatar__icon { width: var(--avatar-icon-size-2xs); height: var(--avatar-icon-size-2xs); }
|
|
165
|
+
.muka-avatar--xs .muka-avatar__icon { width: var(--avatar-icon-size-xs); height: var(--avatar-icon-size-xs); }
|
|
166
|
+
.muka-avatar--sm .muka-avatar__icon { width: var(--avatar-icon-size-sm); height: var(--avatar-icon-size-sm); }
|
|
167
|
+
.muka-avatar--md .muka-avatar__icon { width: var(--avatar-icon-size-md); height: var(--avatar-icon-size-md); }
|
|
168
|
+
.muka-avatar--lg .muka-avatar__icon { width: var(--avatar-icon-size-lg); height: var(--avatar-icon-size-lg); }
|
|
169
|
+
.muka-avatar--xl .muka-avatar__icon { width: var(--avatar-icon-size-xl); height: var(--avatar-icon-size-xl); }
|
|
170
|
+
|
|
171
|
+
/* A Muka Icon fills the slot and takes its colour (its own `color` prop still wins) */
|
|
172
|
+
.muka-avatar__icon .muka-icon {
|
|
173
|
+
width: 100%;
|
|
174
|
+
height: 100%;
|
|
175
|
+
color: inherit;
|
|
153
176
|
}
|
|
154
177
|
|
|
155
178
|
.muka-avatar__icon svg {
|