@sanity/ui 3.0.0-static.24 → 3.0.0-static.26

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/ui",
3
- "version": "3.0.0-static.24",
3
+ "version": "3.0.0-static.26",
4
4
  "keywords": [
5
5
  "react",
6
6
  "ui",
@@ -1,4 +1,5 @@
1
1
  import {AVATAR_COLORS, AVATAR_SIZE, type AvatarSize} from '@sanity/ui/theme'
2
+ import {globalStyle} from '@vanilla-extract/css'
2
3
 
3
4
  import {_fromEntries} from '../../_fromEntries'
4
5
  import {_responsiveStyle} from '../../_responsiveStyle.css'
@@ -113,11 +114,12 @@ export const arrowSvg = _style(layers.primitives, {
113
114
  })
114
115
 
115
116
  export const image = _style(layers.primitives, {
116
- display: 'block',
117
117
  position: 'absolute',
118
+ top: 0,
119
+ left: 0,
118
120
  width: vars.avatar.size,
119
121
  height: vars.avatar.size,
120
- borderRadius: vars.avatar.size,
122
+ borderRadius: 'inherit',
121
123
 
122
124
  selectors: {
123
125
  '[data-image-error] &': {
@@ -126,12 +128,22 @@ export const image = _style(layers.primitives, {
126
128
  },
127
129
  })
128
130
 
131
+ globalStyle(`${image} img`, {
132
+ display: 'block',
133
+ width: '100%',
134
+ height: '100%',
135
+ objectFit: 'cover',
136
+ borderRadius: 'inherit',
137
+ })
138
+
129
139
  export const imageOutline = _style(layers.primitives, {
130
140
  display: 'block',
131
141
  position: 'absolute',
142
+ top: 0,
143
+ left: 0,
132
144
  width: vars.avatar.size,
133
145
  height: vars.avatar.size,
134
- borderRadius: vars.avatar.size,
146
+ borderRadius: 'inherit',
135
147
  boxShadow: [
136
148
  `inset 0 0 0 1px ${vars.color.avatar.bg}`,
137
149
  `inset 0 0 0 1.75px ${vars.color.bg}`,
@@ -140,7 +152,7 @@ export const imageOutline = _style(layers.primitives, {
140
152
 
141
153
  export const initials = _style(layers.primitives, {
142
154
  color: vars.color.avatar.fg,
143
- borderRadius: vars.avatar.size,
155
+ borderRadius: 'inherit',
144
156
  })
145
157
 
146
158
  export const counter = _style(layers.primitives, {
@@ -5,9 +5,15 @@ import type {TextOverflow} from './types'
5
5
 
6
6
  export const options: ResponsiveRuleOptions<TextOverflow> = {
7
7
  clip: _responsiveStyle(layers.props, {
8
+ display: 'block',
9
+ overflow: 'clip',
8
10
  textOverflow: 'clip',
11
+ whiteSpace: 'nowrap',
9
12
  }),
10
13
  ellipsis: _responsiveStyle(layers.props, {
14
+ display: 'block',
15
+ overflow: 'clip',
11
16
  textOverflow: 'ellipsis',
17
+ whiteSpace: 'nowrap',
12
18
  }),
13
19
  }