xref: /expo/docs/ui/components/Tag/styles.ts (revision f4b1168b) 
1import { css } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3import { borderRadius, spacing } from '@expo/styleguide-base';
4
5export const tagStyle = css({
6  display: 'inline-flex',
7  backgroundColor: theme.background.element,
8  color: theme.text.default,
9  fontSize: '90%',
10  padding: `${spacing[1]}px ${spacing[2]}px`,
11  marginBottom: spacing[3],
12  marginRight: spacing[2],
13  borderRadius: borderRadius.sm,
14  border: `1px solid ${theme.border.default}`,
15  alignItems: 'center',
16  gap: spacing[1],
17
18  'table &': {
19    marginTop: 0,
20    marginBottom: spacing[2],
21    padding: `${spacing[0.5]}px ${spacing[1.5]}px`,
22  },
23
24  'nav &': {
25    whiteSpace: 'pre',
26  },
27
28  'h3 &': {
29    fontSize: '80%',
30  },
31});
32
33export const labelStyle = css({
34  lineHeight: `${spacing[4]}px`,
35  fontWeight: 'normal',
36});
37
38export const tagToCStyle = css({
39  fontSize: '0.7rem',
40  marginBottom: 0,
41  marginRight: 0,
42  marginLeft: spacing[1],
43  padding: `0 ${spacing[1.5]}px`,
44});
45