Skip to content

Commit 82c37b1

Browse files
HerrTopiHerrTopi
committed
feat(ui-scripts,ui-avatar,emotion): ads
1 parent 7459a8c commit 82c37b1

File tree

4 files changed

+590
-479
lines changed

4 files changed

+590
-479
lines changed

‎packages/emotion/src/useStyle.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const useStyle = <P extends (theme: any, params: any) => any>(
6262
typeof generateComponentTheme === 'function'
6363
? generateComponentTheme(theme as BaseTheme)
6464
: {}
65+
6566
if (
6667
//@ts-expect-error TODO fix these later
6768
theme.newTheme &&
@@ -72,7 +73,6 @@ const useStyle = <P extends (theme: any, params: any) => any>(
7273
//@ts-expect-error TODO fix these later
7374
theme.newTheme.components[componentId]
7475
}
75-
console.log(componentId, baseComponentTheme)
7676
const themeOverride = getComponentThemeOverride(
7777
theme,
7878
displayName ? displayName : componentId || '',

‎packages/ui-avatar/src/Avatar/README.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,58 @@ readonly: true
1616

1717
<div>
1818
<InstUISettingsProvider theme={canvas}>
19+
<div>
20+
<View display="block" padding="small medium" background="primary">
21+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
22+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
23+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
24+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
25+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
26+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
27+
<Avatar name="Isaac Asimov" color="ash" />
28+
</View>
29+
</div>
30+
</InstUISettingsProvider>
31+
<InstUISettingsProvider theme={rebrandDark}>
32+
<div>
33+
<View display="block" padding="small medium" background="primary">
34+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
35+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
36+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
37+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
38+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
39+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
40+
<Avatar name="Isaac Asimov" color="ash" />
41+
</View>
42+
</div>
43+
</InstUISettingsProvider>
44+
<InstUISettingsProvider theme={rebrandLight}>
45+
<div>
46+
<View display="block" padding="small medium" background="primary">
47+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
48+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
49+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
50+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
51+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
52+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
53+
<Avatar name="Isaac Asimov" color="ash" />
54+
</View>
55+
</div>
56+
</InstUISettingsProvider>
57+
<InstUISettingsProvider theme={canvasHighContrast}>
58+
<div>
59+
<View display="block" padding="small medium" background="primary">
60+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
61+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
62+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
63+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
64+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
65+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
66+
<Avatar name="Isaac Asimov" color="ash" />
67+
</View>
68+
</div>
69+
</InstUISettingsProvider>
70+
<InstUISettingsProvider theme={canvas}>
1971
<div>
2072
<View display="block" padding="small medium" background="primary">
2173
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />

‎packages/ui-avatar/src/Avatar/styles.ts‎

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const generateStyle = (
6161
) => {
6262
return `${(originalFontSize * originalScaler) / newFontSize}em`
6363
}
64-
64+
console.log(componentTheme)
6565
const sizeStyles = {
6666
auto: {
6767
fontSize: 'inherit',
@@ -157,29 +157,53 @@ const generateStyle = (
157157
background: componentTheme.accent1Background,
158158
icon: componentTheme.accent1Icon
159159
}, // = brand
160-
shamrock: componentTheme.colorShamrock,
161-
barney: componentTheme.colorBarney,
162-
crimson: componentTheme.colorCrimson,
163-
fire: componentTheme.colorFire,
164-
licorice: componentTheme.colorLicorice,
165-
ash: componentTheme.colorAsh,
160+
shamrock: {
161+
text: componentTheme.accent2Text,
162+
background: componentTheme.accent2Background,
163+
icon: componentTheme.accent2Icon
164+
},
165+
barney: {
166+
text: componentTheme.accent3Text,
167+
background: componentTheme.accent3Background,
168+
icon: componentTheme.accent3Icon
169+
},
170+
crimson: {
171+
text: componentTheme.accent4Text,
172+
background: componentTheme.accent4Background,
173+
icon: componentTheme.accent4Icon
174+
},
175+
fire: {
176+
text: componentTheme.accent5Text,
177+
background: componentTheme.accent5Background,
178+
icon: componentTheme.accent5Icon
179+
},
180+
licorice: {
181+
text: componentTheme.accent6text,
182+
background: componentTheme.accent6Background,
183+
icon: componentTheme.accent6Icon
184+
},
185+
ash: {
186+
text: componentTheme.accent1Text,
187+
background: componentTheme.accent1Background,
188+
icon: componentTheme.accent1Icon
189+
},
166190
ai: `
167-
linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
168-
linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`
191+
linear-gradient(to bottom, ${componentTheme.aiTopGradient} 0%, ${componentTheme.aiBottomGradient} 100%) padding-box,
192+
linear-gradient(to bottom right, ${componentTheme.aiTopGradient} 0%, ${componentTheme.aiBottomGradient} 100%) border-box`
169193
}
170194

171195
const background = () => {
172196
if (color === 'ai') {
173197
return {
174198
background: `
175-
linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
176-
linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`,
199+
linear-gradient(to bottom, ${componentTheme.aiTopGradient} 0%, ${componentTheme.aiBottomGradient} 100%) padding-box,
200+
linear-gradient(to bottom right, ${componentTheme.aiTopGradient} 0%, ${componentTheme.aiBottomGradient} 100%) border-box`,
177201
border: 'solid transparent'
178202
}
179203
}
180204
return hasInverseColor
181205
? {
182-
backgroundColor: colorVariants[color!],
206+
backgroundColor: colorVariants[color!].background,
183207
backgroundClip: 'content-box'
184208
}
185209
: {
@@ -190,17 +214,19 @@ const generateStyle = (
190214

191215
const contentColor = () => {
192216
if (color === 'ai') {
193-
return componentTheme.aiFontColor
217+
return componentTheme.aiFont
194218
}
195-
return hasInverseColor ? componentTheme.background : colorVariants[color!]
219+
return hasInverseColor
220+
? componentTheme.background
221+
: colorVariants[color!].text
196222
}
197223

198224
return {
199225
avatar: {
200226
label: 'avatar',
201227
boxSizing: 'border-box',
202228
borderStyle: 'solid',
203-
borderColor: componentTheme.borderColor,
229+
borderColor: componentTheme.border,
204230
...background(),
205231
backgroundPosition: 'center',
206232
backgroundSize: 'cover',
@@ -216,7 +242,7 @@ const generateStyle = (
216242
...(showBorder !== 'always' && {
217243
border: 0
218244
}),
219-
boxShadow: `inset 0 0 ${componentTheme.boxShadowBlur} 0 ${componentTheme.boxShadowColor}`
245+
boxShadow: `inset 0 0 ${componentTheme.boxShadow.blur} 0 ${componentTheme.boxShadow.color}`
220246
}
221247
: {
222248
backgroundImage: undefined,
@@ -234,7 +260,6 @@ const generateStyle = (
234260
label: 'avatar__initials',
235261
color: contentColor(),
236262
lineHeight: '2.375em',
237-
fontFamily: componentTheme.fontFamily,
238263
fontWeight: componentTheme.fontWeight,
239264
letterSpacing: '0.0313em',
240265
...initialSizeStyles[size!]

0 commit comments

Comments
 (0)