-
-
Notifications
You must be signed in to change notification settings - Fork 379
Expand file tree
/
Copy paththeme.css
More file actions
71 lines (59 loc) · 1.43 KB
/
theme.css
File metadata and controls
71 lines (59 loc) · 1.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
@plugin "./dist/module/plugin.js";
@import "tailwindcss-safe-area";
@theme {
--elevation-xs: 1;
--elevation-sm: 3;
--elevation-md: 6;
--elevation-lg: 8;
--elevation-xl: 13;
--elevation-2xl: 24;
--elevation-none: 0;
}
:root {
@media ios {
--font-sans: System;
--font-serif: Georgia;
--font-mono: Menlo;
}
@media android {
--font-sans: SystemAndroid;
--font-serif: sans-serif;
--font-mono: monospace;
}
}
/**
* We need to override the leading-* utility. It returns a value in rem units, but react-native-css only accepts
* unit-less values for line-height
*/
@utility leading-* {
line-height: calc(var(--spacing) / 1rem * --value(integer));
}
@utility color-* {
color: --value(--color-*);
}
@utility tint-* {
-rn-tint: --value(--color-*);
@prop -rn-tint tint;
}
@utility ripple-* {
-rn-ripple-style: --value("borderless");
-rn-ripple-color: --value(--color-*);
}
@utility ripple-* {
-rn-ripple-radius: --value(integer);
}
@utility ripple-foreground {
-rn-ripple-foreground: "foreground";
}
@utility elevation-* {
-rn-elevation: --value(--elevation-*);
}
@utility corner-* {
corner-shape: --value("rounded", "squircle");
}
@custom-variant ios (@media ios);
@custom-variant android (@media android);
@custom-variant native (@media native);
@custom-variant tv (@media (display-mode: tv));
/* Native does not support the child combinator */
@custom-variant web (@supports selector(div > div));