Skip to content

Commit b441688

Browse files
yuanqingyuanqing
authored
Merge pull request #273 from chesterhow/main
fix: make `base.css` compatible with tailwind
2 parents 669fe10 + 0f9398d commit b441688

File tree

1 file changed

+109
-107
lines changed

1 file changed

+109
-107
lines changed

‎packages/ui/src/css/base.css‎

Lines changed: 109 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,121 @@
1-
:root {
2-
--border-width-1: 1px;
3-
--border-width-4: 4px;
4-
--border-radius-2: 2px;
5-
--border-radius-4: 4px;
6-
--border-radius-6: 6px;
7-
--border-radius-12: 12px;
8-
--box-shadow: var(--box-shadow-menu);
9-
--box-shadow-menu:
10-
0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15),
11-
inset 0 0 0 0.5px #000000, 0 0 0 0.5px rgba(0, 0, 0, 0.1);
12-
--box-shadow-modal:
13-
0 2px 14px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
14-
--box-shadow-range-slider:
15-
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 8px 0 rgba(0, 0, 0, 0.1),
16-
0 0 0.5px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
17-
--color-bg-menu: #1e1e1e;
18-
--color-bg-overlay: rgba(0, 0, 0, 0.5);
19-
--font-family: 'Inter', 'Helvetica', sans-serif;
20-
--font-family-code:
21-
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
22-
monospace;
23-
--font-size-11: 11px;
24-
--font-size-12: 12px;
25-
--font-weight-regular: 400;
26-
--font-weight-bold: 600;
27-
--line-height-16: 16px;
28-
--opacity-30: 0.3;
29-
--space-extra-small: 8px;
30-
--space-small: 12px;
31-
--space-medium: 16px;
32-
--space-large: 20px;
33-
--space-extra-large: 24px;
34-
--space-0: 0;
35-
--space-4: 4px;
36-
--space-6: 6px;
37-
--space-8: 8px;
38-
--space-12: 12px;
39-
--space-16: 16px;
40-
--space-20: 20px;
41-
--space-24: 24px;
42-
--space-28: 28px;
43-
--space-32: 32px;
44-
--transition-duration-100: 0.1s;
45-
--transition-duration-300: 0.3s;
46-
--z-index-1: 1;
47-
--z-index-2: 2;
48-
}
1+
@layer base {
2+
:root {
3+
--border-width-1: 1px;
4+
--border-width-4: 4px;
5+
--border-radius-2: 2px;
6+
--border-radius-4: 4px;
7+
--border-radius-6: 6px;
8+
--border-radius-12: 12px;
9+
--box-shadow: var(--box-shadow-menu);
10+
--box-shadow-menu:
11+
0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15),
12+
inset 0 0 0 0.5px #000000, 0 0 0 0.5px rgba(0, 0, 0, 0.1);
13+
--box-shadow-modal:
14+
0 2px 14px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
15+
--box-shadow-range-slider:
16+
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 8px 0 rgba(0, 0, 0, 0.1),
17+
0 0 0.5px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
18+
--color-bg-menu: #1e1e1e;
19+
--color-bg-overlay: rgba(0, 0, 0, 0.5);
20+
--font-family: 'Inter', 'Helvetica', sans-serif;
21+
--font-family-code:
22+
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
23+
monospace;
24+
--font-size-11: 11px;
25+
--font-size-12: 12px;
26+
--font-weight-regular: 400;
27+
--font-weight-bold: 600;
28+
--line-height-16: 16px;
29+
--opacity-30: 0.3;
30+
--space-extra-small: 8px;
31+
--space-small: 12px;
32+
--space-medium: 16px;
33+
--space-large: 20px;
34+
--space-extra-large: 24px;
35+
--space-0: 0;
36+
--space-4: 4px;
37+
--space-6: 6px;
38+
--space-8: 8px;
39+
--space-12: 12px;
40+
--space-16: 16px;
41+
--space-20: 20px;
42+
--space-24: 24px;
43+
--space-28: 28px;
44+
--space-32: 32px;
45+
--transition-duration-100: 0.1s;
46+
--transition-duration-300: 0.3s;
47+
--z-index-1: 1;
48+
--z-index-2: 2;
49+
}
4950

50-
.figma-dark {
51-
color-scheme: dark;
52-
}
51+
.figma-dark {
52+
color-scheme: dark;
53+
}
5354

54-
* {
55-
box-sizing: border-box;
56-
border-width: 0;
57-
border-style: solid;
58-
border-color: currentColor;
59-
}
55+
* {
56+
box-sizing: border-box;
57+
border-width: 0;
58+
border-style: solid;
59+
border-color: currentColor;
60+
}
6061

61-
body {
62-
margin: 0;
63-
background-color: var(--figma-color-bg);
64-
color: var(--figma-color-text);
65-
font-family: var(--font-family);
66-
font-size: var(--font-size-11);
67-
font-weight: var(--font-weight-regular);
68-
line-height: var(--line-height-16);
69-
}
62+
body {
63+
margin: 0;
64+
background-color: var(--figma-color-bg);
65+
color: var(--figma-color-text);
66+
font-family: var(--font-family);
67+
font-size: var(--font-size-11);
68+
font-weight: var(--font-weight-regular);
69+
line-height: var(--line-height-16);
70+
}
7071

71-
div,
72-
span {
73-
cursor: default;
74-
user-select: none;
75-
}
72+
div,
73+
span {
74+
cursor: default;
75+
user-select: none;
76+
}
7677

77-
h1,
78-
h2,
79-
h3 {
80-
margin: 0;
81-
font-weight: inherit;
82-
}
78+
h1,
79+
h2,
80+
h3 {
81+
margin: 0;
82+
font-weight: inherit;
83+
}
8384

84-
button {
85-
padding: 0;
86-
border: 0;
87-
-webkit-appearance: none;
88-
background-color: transparent;
89-
font: inherit;
90-
outline: 0;
91-
}
85+
button {
86+
padding: 0;
87+
border: 0;
88+
-webkit-appearance: none;
89+
background-color: transparent;
90+
font: inherit;
91+
outline: 0;
92+
}
9293

93-
hr {
94-
border: 0;
95-
margin: 0;
96-
}
94+
hr {
95+
border: 0;
96+
margin: 0;
97+
}
9798

98-
label {
99-
display: block;
100-
}
99+
label {
100+
display: block;
101+
}
101102

102-
input,
103-
textarea {
104-
padding: 0;
105-
border: 0;
106-
margin: 0;
107-
-webkit-appearance: none;
108-
cursor: default;
109-
font: inherit;
110-
outline: 0;
111-
}
103+
input,
104+
textarea {
105+
padding: 0;
106+
border: 0;
107+
margin: 0;
108+
-webkit-appearance: none;
109+
cursor: default;
110+
font: inherit;
111+
outline: 0;
112+
}
112113

113-
svg {
114-
display: block;
115-
}
114+
svg {
115+
display: block;
116+
}
116117

117-
::selection {
118-
background-color: var(--figma-color-bg-onselected);
118+
::selection {
119+
background-color: var(--figma-color-bg-onselected);
120+
}
119121
}

0 commit comments

Comments
 (0)
⚡