Skip to content

Commit 23b0db3

Browse files
CatsJuiceCatsJuice
authored
feat(component): mobile menu support (#7892)
1 parent 182b2fd commit 23b0db3

File tree

57 files changed

+989
-1483
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+989
-1483
lines changed

‎packages/frontend/component/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,13 @@
4343
"@radix-ui/react-popover": "^1.0.7",
4444
"@radix-ui/react-radio-group": "^1.1.3",
4545
"@radix-ui/react-scroll-area": "^1.0.5",
46+
"@radix-ui/react-slot": "^1.1.0",
4647
"@radix-ui/react-tabs": "^1.1.0",
4748
"@radix-ui/react-toast": "^1.1.5",
4849
"@radix-ui/react-toolbar": "^1.0.4",
4950
"@radix-ui/react-tooltip": "^1.0.7",
5051
"@radix-ui/react-visually-hidden": "^1.1.0",
51-
"@toeverything/theme": "^1.0.4",
52+
"@toeverything/theme": "^1.0.5",
5253
"@vanilla-extract/dynamic": "^2.1.0",
5354
"bytes": "^3.1.2",
5455
"check-password-strength": "^2.0.10",

‎packages/frontend/component/src/theme/global.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,3 +288,9 @@ body {
288288
[data-lit-react-wrapper] {
289289
display: contents;
290290
}
291+
292+
/* Avoid color overriden by user-agent */
293+
button,
294+
input {
295+
color: inherit;
296+
}

‎packages/frontend/component/src/ui/button/styles.css.ts‎

Lines changed: 1 addition & 362 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { cssVar } from '@toeverything/theme';
2-
import { cssVarV2 } from '@toeverything/theme/v2';
3-
import { globalStyle, style } from '@vanilla-extract/css';
2+
import { style } from '@vanilla-extract/css';
43
export const dropdownBtn = style({
54
display: 'inline-flex',
65
alignItems: 'center',
@@ -108,363 +107,3 @@ export const radioButtonGroup = style({
108107
// @ts-expect-error - fix electron drag
109108
WebkitAppRegion: 'no-drag',
110109
});
111-
export const button = style({
112-
display: 'inline-flex',
113-
justifyContent: 'center',
114-
alignItems: 'center',
115-
userSelect: 'none',
116-
touchAction: 'manipulation',
117-
outline: '0',
118-
border: '1px solid',
119-
padding: '0 18px',
120-
borderRadius: '8px',
121-
fontSize: cssVar('fontBase'),
122-
transition: 'all .3s',
123-
['WebkitAppRegion' as string]: 'no-drag',
124-
fontWeight: 600,
125-
// changeable
126-
height: '28px',
127-
background: cssVar('white'),
128-
borderColor: cssVarV2('layer/insideBorder/border'),
129-
color: cssVarV2('text/primary'),
130-
selectors: {
131-
'&.text-bold': {
132-
fontWeight: 600,
133-
},
134-
'&:not(.without-hover):hover': {
135-
background: cssVar('hoverColor'),
136-
},
137-
'&.disabled': {
138-
opacity: '.4',
139-
cursor: 'default',
140-
color: cssVar('textDisableColor'),
141-
pointerEvents: 'none',
142-
},
143-
'&.loading': {
144-
cursor: 'default',
145-
color: cssVar('textDisableColor'),
146-
pointerEvents: 'none',
147-
},
148-
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
149-
{
150-
background: 'inherit',
151-
},
152-
'&.block': {
153-
display: 'flex',
154-
width: '100%',
155-
},
156-
'&.circle': {
157-
borderRadius: '50%',
158-
},
159-
'&.round': {
160-
borderRadius: '14px',
161-
},
162-
// size
163-
'&.large': {
164-
height: '32px',
165-
},
166-
'&.round.large': {
167-
borderRadius: '16px',
168-
},
169-
'&.extraLarge': {
170-
height: '40px',
171-
},
172-
'&.round.extraLarge': {
173-
borderRadius: '20px',
174-
},
175-
// type
176-
'&.plain': {
177-
color: cssVar('textPrimaryColor'),
178-
borderColor: 'transparent',
179-
background: 'transparent',
180-
},
181-
'&.primary': {
182-
color: cssVar('pureWhite'),
183-
background: cssVar('primaryColor'),
184-
borderColor: cssVar('black10'),
185-
boxShadow: cssVar('buttonInnerShadow'),
186-
},
187-
'&.primary:not(.without-hover):hover': {
188-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
189-
'primaryColor'
190-
)}`,
191-
},
192-
'&.primary.disabled': {
193-
opacity: '.4',
194-
cursor: 'default',
195-
},
196-
'&.primary.disabled:not(.without-hover):hover': {
197-
background: cssVar('primaryColor'),
198-
},
199-
'&.error': {
200-
color: cssVar('pureWhite'),
201-
background: cssVar('errorColor'),
202-
borderColor: cssVar('black10'),
203-
boxShadow: cssVar('buttonInnerShadow'),
204-
},
205-
'&.error:not(.without-hover):hover': {
206-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
207-
'errorColor'
208-
)}`,
209-
},
210-
'&.error.disabled': {
211-
opacity: '.4',
212-
cursor: 'default',
213-
},
214-
'&.error.disabled:not(.without-hover):hover': {
215-
background: cssVar('errorColor'),
216-
},
217-
'&.warning': {
218-
color: cssVar('white'),
219-
background: cssVar('warningColor'),
220-
borderColor: cssVar('black10'),
221-
boxShadow: cssVar('buttonInnerShadow'),
222-
},
223-
'&.warning:not(.without-hover):hover': {
224-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
225-
'warningColor'
226-
)}`,
227-
},
228-
'&.warning.disabled': {
229-
opacity: '.4',
230-
cursor: 'default',
231-
},
232-
'&.warning.disabled:not(.without-hover):hover': {
233-
background: cssVar('warningColor'),
234-
},
235-
'&.success': {
236-
color: cssVar('pureWhite'),
237-
background: cssVar('successColor'),
238-
borderColor: cssVar('black10'),
239-
boxShadow: cssVar('buttonInnerShadow'),
240-
},
241-
'&.success:not(.without-hover):hover': {
242-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
243-
'successColor'
244-
)}`,
245-
},
246-
'&.success.disabled': {
247-
opacity: '.4',
248-
cursor: 'default',
249-
},
250-
'&.success.disabled:not(.without-hover):hover': {
251-
background: cssVar('successColor'),
252-
},
253-
'&.processing': {
254-
color: cssVar('pureWhite'),
255-
background: cssVar('processingColor'),
256-
borderColor: cssVar('black10'),
257-
boxShadow: cssVar('buttonInnerShadow'),
258-
},
259-
'&.processing:not(.without-hover):hover': {
260-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
261-
'processingColor'
262-
)}`,
263-
},
264-
'&.processing.disabled': {
265-
opacity: '.4',
266-
cursor: 'default',
267-
},
268-
'&.processing.disabled:not(.without-hover):hover': {
269-
background: cssVar('processingColor'),
270-
},
271-
},
272-
});
273-
globalStyle(`${button} > span`, {
274-
// flex: 1,
275-
lineHeight: 1,
276-
padding: '0 4px',
277-
});
278-
export const buttonIcon = style({
279-
flexShrink: 0,
280-
display: 'inline-flex',
281-
justifyContent: 'center',
282-
alignItems: 'center',
283-
color: cssVar('iconColor'),
284-
fontSize: '16px',
285-
width: '16px',
286-
height: '16px',
287-
selectors: {
288-
'&.start': {
289-
marginRight: '4px',
290-
},
291-
'&.end': {
292-
marginLeft: '4px',
293-
},
294-
'&.large': {
295-
fontSize: '20px',
296-
width: '20px',
297-
height: '20px',
298-
},
299-
'&.extraLarge': {
300-
fontSize: '20px',
301-
width: '20px',
302-
height: '20px',
303-
},
304-
'&.color-white': {
305-
color: cssVar('white'),
306-
},
307-
},
308-
});
309-
export const iconButton = style({
310-
display: 'inline-flex',
311-
justifyContent: 'center',
312-
alignItems: 'center',
313-
userSelect: 'none',
314-
touchAction: 'manipulation',
315-
outline: '0',
316-
border: '1px solid',
317-
borderRadius: '4px',
318-
transition: 'all .3s',
319-
['WebkitAppRegion' as string]: 'no-drag',
320-
// changeable
321-
width: '24px',
322-
height: '24px',
323-
fontSize: '20px',
324-
color: cssVar('textPrimaryColor'),
325-
borderColor: cssVar('borderColor'),
326-
selectors: {
327-
'&.without-padding': {
328-
margin: '-2px',
329-
},
330-
'&.active': {
331-
color: cssVar('primaryColor'),
332-
},
333-
'&:not(.without-hover):hover': {
334-
background: cssVar('hoverColor'),
335-
},
336-
'&.disabled': {
337-
opacity: '.4',
338-
cursor: 'default',
339-
color: cssVar('textDisableColor'),
340-
pointerEvents: 'none',
341-
},
342-
'&.loading': {
343-
cursor: 'default',
344-
color: cssVar('textDisableColor'),
345-
pointerEvents: 'none',
346-
},
347-
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
348-
{
349-
background: 'inherit',
350-
},
351-
// size
352-
'&.large': {
353-
width: '32px',
354-
height: '32px',
355-
fontSize: '24px',
356-
},
357-
'&.large.without-padding': {
358-
margin: '-4px',
359-
},
360-
'&.small': {
361-
width: '20px',
362-
height: '20px',
363-
fontSize: '16px',
364-
},
365-
'&.extra-small': {
366-
width: '16px',
367-
height: '16px',
368-
fontSize: '12px',
369-
},
370-
// type
371-
'&.plain': {
372-
color: cssVar('iconColor'),
373-
borderColor: 'transparent',
374-
background: 'transparent',
375-
},
376-
'&.plain.active': {
377-
color: cssVar('primaryColor'),
378-
},
379-
'&.primary': {
380-
color: cssVar('white'),
381-
background: cssVar('primaryColor'),
382-
borderColor: cssVar('black10'),
383-
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
384-
},
385-
'&.primary:not(.without-hover):hover': {
386-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
387-
'primaryColor'
388-
)}`,
389-
},
390-
'&.primary.disabled': {
391-
opacity: '.4',
392-
cursor: 'default',
393-
},
394-
'&.primary.disabled:not(.without-hover):hover': {
395-
background: cssVar('primaryColor'),
396-
},
397-
'&.error': {
398-
color: cssVar('white'),
399-
background: cssVar('errorColor'),
400-
borderColor: cssVar('black10'),
401-
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
402-
},
403-
'&.error:not(.without-hover):hover': {
404-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
405-
'errorColor'
406-
)}`,
407-
},
408-
'&.error.disabled': {
409-
opacity: '.4',
410-
cursor: 'default',
411-
},
412-
'&.error.disabled:not(.without-hover):hover': {
413-
background: cssVar('errorColor'),
414-
},
415-
'&.warning': {
416-
color: cssVar('white'),
417-
background: cssVar('warningColor'),
418-
borderColor: cssVar('black10'),
419-
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
420-
},
421-
'&.warning:not(.without-hover):hover': {
422-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
423-
'warningColor'
424-
)}`,
425-
},
426-
'&.warning.disabled': {
427-
opacity: '.4',
428-
cursor: 'default',
429-
},
430-
'&.warning.disabled:not(.without-hover):hover': {
431-
background: cssVar('warningColor'),
432-
},
433-
'&.success': {
434-
color: cssVar('white'),
435-
background: cssVar('successColor'),
436-
borderColor: cssVar('black10'),
437-
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
438-
},
439-
'&.success:not(.without-hover):hover': {
440-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
441-
'successColor'
442-
)}`,
443-
},
444-
'&.success.disabled': {
445-
opacity: '.4',
446-
cursor: 'default',
447-
},
448-
'&.success.disabled:not(.without-hover):hover': {
449-
background: cssVar('successColor'),
450-
},
451-
'&.processing': {
452-
color: cssVar('white'),
453-
background: cssVar('processingColor'),
454-
borderColor: cssVar('black10'),
455-
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
456-
},
457-
'&.processing:not(.without-hover):hover': {
458-
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
459-
'processingColor'
460-
)}`,
461-
},
462-
'&.processing.disabled': {
463-
opacity: '.4',
464-
cursor: 'default',
465-
},
466-
'&.processing.disabled:not(.without-hover):hover': {
467-
background: cssVar('processingColor'),
468-
},
469-
},
470-
});

0 commit comments

Comments
 (0)