Skip to content

Commit cf26af6

Browse files
juliajforestijuliajforesti
authored
fix(fuselage): colors (#980)
* fix titles-labels token * fix MessageGenericPreview color * remove old colors on Theme.ts
1 parent d00d0ea commit cf26af6

File tree

3 files changed

+54
-100
lines changed

3 files changed

+54
-100
lines changed

‎packages/fuselage/src/Theme.ts

+3-14
Original file line numberDiff line numberDiff line change
@@ -138,12 +138,6 @@ export const surfaceColors = {
138138
'surface-hover': neutral.n200.theme('surface-hover'),
139139
'surface-selected': neutral.n450.theme('surface-selected'),
140140
'surface-dark': neutral.n800.theme('surface-dark'),
141-
'surface-info': info.i200.theme('surface-info'),
142-
'surface-success': success.s200.theme('surface-success'),
143-
'surface-warning': warning.w200.theme('surface-warning'),
144-
'surface-danger': danger.d200.theme('surface-danger'),
145-
'surface-service-1': service1['200'].theme('surface-service-1'),
146-
'surface-service-2': service2['200'].theme('surface-service-2'),
147141
'surface-featured': service2['700'].theme('surface-featured'),
148142
'surface-featured-hover': service2['800'].theme('surface-featured-hover'),
149143
'surface-transparent': 'transparent',
@@ -172,16 +166,11 @@ export const textIconColors = {
172166
'font-disabled': neutral.n500.theme('font-disabled'),
173167
'font-annotation': neutral.n600.theme('font-annotation'),
174168
'font-hint': neutral.n700.theme('font-hint'),
169+
'font-secondary-info': neutral.n700.theme('font-secondary-info'),
175170
'font-default': neutral.n800.theme('font-default'),
176-
'font-title-labels': neutral.n900.theme('font-title-labels'),
171+
'font-titles-labels': neutral.n900.theme('font-titles-labels'),
172+
'font-info': primary.p600.theme('font-info'),
177173
'font-danger': danger.d600.theme('font-danger'),
178-
'font-secondary-info': neutral.n700.theme('font-secondary-info'),
179-
'font-on-info': info.i600.theme('font-on-info'),
180-
'font-on-success': success.s800.theme('font-on-success'),
181-
'font-on-warning': warning.w900.theme('font-on-warning'),
182-
'font-on-danger': danger.d800.theme('font-on-danger'),
183-
'font-on-service-1': service1[800].theme('font-on-service-1'),
184-
'font-on-service-2': service2[600].theme('font-on-service-2'),
185174
'font-pure-black': neutral.n800.theme('font-pure-black'),
186175
'font-pure-white': white.theme('font-pure-white'),
187176
};

‎packages/fuselage/src/components/Box/props.stories.mdx

+49-85
Original file line numberDiff line numberDiff line change
@@ -122,24 +122,33 @@ The `is` prop allows `Box` to render any component capable of handling common DO
122122
overflow='hidden'
123123
>
124124
{flattenChildren(fn().props.children).map((child) =>
125-
React.cloneElement(child, { m: 'x4', size: 'x122' }, child.props.bg)
125+
React.cloneElement(
126+
child,
127+
{
128+
m: 'x4',
129+
size: 'x122',
130+
color: 'annotation',
131+
textAlign: 'center',
132+
},
133+
child.props.bg
134+
)
126135
)}
127136
</Box>
128137
),
129138
]}
130139
>
131140
<>
132-
<Box bg='surface-light' />
133-
<Box bg='surface-tint' />
134-
<Box bg='surface-neutral' />
135-
<Box bg='surface-disabled' />
136-
<Box bg='surface-hover' />
137-
<Box bg='surface-info' />
138-
<Box bg='surface-success' />
139-
<Box bg='surface-warning' />
140-
<Box bg='surface-danger' />
141-
<Box bg='surface-service-1' />
142-
<Box bg='surface-service-2' />
141+
<Box bg='light' />
142+
<Box bg='tint' />
143+
<Box bg='room' />
144+
<Box bg='neutral' />
145+
<Box bg='disabled' />
146+
<Box bg='hover' />
147+
<Box bg='selected' />
148+
<Box bg='dark' />
149+
<Box bg='featured' />
150+
<Box bg='featured-hover' />
151+
<Box bg='transparent' />
143152
</>
144153
</Story>
145154
</Canvas>
@@ -158,7 +167,11 @@ The `is` prop allows `Box` to render any component capable of handling common DO
158167
overflow='hidden'
159168
>
160169
{flattenChildren(fn().props.children).map((child) =>
161-
React.cloneElement(child, { m: 'x4', size: 'x122' }, child.props.bg)
170+
React.cloneElement(
171+
child,
172+
{ m: 'x4', size: 'x122', textAlign: 'center' },
173+
child.props.bg
174+
)
162175
)}
163176
</Box>
164177
),
@@ -189,22 +202,32 @@ The `is` prop allows `Box` to render any component capable of handling common DO
189202
overflow='hidden'
190203
>
191204
{flattenChildren(fn().props.children).map((child) =>
192-
React.cloneElement(child, { m: 'x4', size: 'x122' }, child.props.bg)
205+
React.cloneElement(
206+
child,
207+
{
208+
m: 'x4',
209+
textAlign: 'center',
210+
size: 'x122',
211+
color: 'annotation',
212+
borderWidth: 'x8',
213+
},
214+
child.props.borderColor
215+
)
193216
)}
194217
</Box>
195218
),
196219
]}
197220
>
198221
<>
199-
<Box bg='stroke-extra-light' />
200-
<Box bg='stroke-light' />
201-
<Box bg='stroke-medium' />
202-
<Box bg='stroke-dark' />
203-
<Box bg='stroke-extra-dark' />
204-
<Box bg='stroke-extra-light-highlight' />
205-
<Box bg='stroke-highlight' />
206-
<Box bg='stroke-extra-light-error' />
207-
<Box bg='stroke-error' />
222+
<Box borderColor='stroke-extra-light' />
223+
<Box borderColor='stroke-light' />
224+
<Box borderColor='stroke-medium' />
225+
<Box borderColor='stroke-dark' />
226+
<Box borderColor='stroke-extra-dark' />
227+
<Box borderColor='stroke-extra-light-highlight' />
228+
<Box borderColor='stroke-highlight' />
229+
<Box borderColor='stroke-extra-light-error' />
230+
<Box borderColor='stroke-error' />
208231
</>
209232
</Story>
210233
</Canvas>
@@ -237,71 +260,12 @@ The `is` prop allows `Box` to render any component capable of handling common DO
237260
<Box color='font-white' />
238261
<Box color='font-disabled' />
239262
<Box color='font-annotation' />
263+
<Box color='font-secondary-info' />
240264
<Box color='font-hint' />
241265
<Box color='font-text' />
242-
<Box color='font-title-labels' />
266+
<Box color='font-titles-labels' />
267+
<Box color='font-info' />
243268
<Box color='font-danger' />
244-
<Box color='font-secondary-info' />
245-
<Box color='font-on-info' />
246-
<Box color='font-on-success' />
247-
<Box color='font-on-warning' />
248-
<Box color='font-on-danger' />
249-
<Box color='font-on-service-1' />
250-
<Box color='font-on-service-2' />
251-
</>
252-
</Story>
253-
</Canvas>
254-
255-
#### Background colors
256-
257-
<Canvas>
258-
<Story
259-
name='Background colors'
260-
decorators={[
261-
(fn) => (
262-
<Box
263-
display='flex'
264-
flexWrap='wrap'
265-
alignItems='center'
266-
overflow='hidden'
267-
>
268-
{flattenChildren(fn().props.children).map((child) =>
269-
React.cloneElement(child, { m: 'x4', size: 'x32' })
270-
)}
271-
</Box>
272-
),
273-
]}
274-
>
275-
<>
276-
<Box bg='neutral-500' />
277-
<Box bg='neutral-500-50' />
278-
<Box bg='primary-500' />
279-
<Box bg='primary-500-50' />
280-
<Box bg='info-500' />
281-
<Box bg='info-500-50' />
282-
<Box bg='success-500' />
283-
<Box bg='success-500-50' />
284-
<Box bg='warning-500' />
285-
<Box bg='warning-500-50' />
286-
<Box bg='danger-500' />
287-
<Box bg='danger-500-50' />
288-
<Box bg='surface' />
289-
<Box bg='surface-light' />
290-
<Box bg='surface-tint' />
291-
<Box bg='surface-neutral' />
292-
<Box bg='default' />
293-
<Box bg='info' />
294-
<Box bg='hint' />
295-
<Box bg='disabled' />
296-
<Box bg='alternative' />
297-
<Box bg='primary' />
298-
<Box bg='success' />
299-
<Box bg='danger' />
300-
<Box bg='warning' />
301-
<Box bg='link' />
302-
<Box bg='visited-link' />
303-
<Box bg='active-link' />
304-
<Box bg='rebeccapurple' />
305269
</>
306270
</Story>
307271
</Canvas>

‎packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.styles.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,11 @@ $message-generic-preview-icon-background-color: theme(
4040
overflow: hidden;
4141
flex-direction: column;
4242

43+
color: $message-generic-preview-context-color;
44+
4345
border: lengths.border-width(default) solid
4446
$message-generic-preview-border-color;
4547
border-radius: lengths.border-radius(medium);
46-
4748
background-color: $message-generic-preview-content-background-color;
4849

4950
font-size: 0;

0 commit comments

Comments
 (0)