bemoji 1.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/base.css +135 -0
- package/css/components.css +715 -0
- package/css/tokens.css +110 -0
- package/package.json +25 -0
- package/src/index.js +8 -0
- package/src/react.js +75 -0
- package/src/resolver.js +158 -0
- package/src/vocabulary.js +189 -0
package/css/base.css
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BEMoji Base Styles
|
|
3
|
+
* A minimal, sensible reset + foundation layer.
|
|
4
|
+
*
|
|
5
|
+
* @import 'bemoji/base';
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
*, *::before, *::after {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html {
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
-webkit-text-size-adjust: 100%;
|
|
15
|
+
tab-size: 4;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body {
|
|
19
|
+
margin: 0;
|
|
20
|
+
font-family:
|
|
21
|
+
system-ui,
|
|
22
|
+
-apple-system,
|
|
23
|
+
BlinkMacSystemFont,
|
|
24
|
+
'Segoe UI',
|
|
25
|
+
Roboto,
|
|
26
|
+
sans-serif;
|
|
27
|
+
font-size: var(--โ๏ธ-base, 1rem);
|
|
28
|
+
line-height: var(--๐-normal, 1.5);
|
|
29
|
+
color: var(--โฌ, #0d0d0f);
|
|
30
|
+
background-color: var(--โฌ, #ffffff);
|
|
31
|
+
-webkit-font-smoothing: antialiased;
|
|
32
|
+
-moz-osx-font-smoothing: grayscale;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Headings */
|
|
36
|
+
h1, h2, h3, h4, h5, h6 {
|
|
37
|
+
margin: 0;
|
|
38
|
+
font-size: inherit;
|
|
39
|
+
font-weight: inherit;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Lists */
|
|
43
|
+
ol, ul, menu {
|
|
44
|
+
list-style: none;
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Media */
|
|
50
|
+
img, svg, video, canvas, audio, iframe, embed, object {
|
|
51
|
+
display: block;
|
|
52
|
+
max-width: 100%;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
img, video {
|
|
56
|
+
height: auto;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Forms */
|
|
60
|
+
button, input, optgroup, select, textarea {
|
|
61
|
+
font-family: inherit;
|
|
62
|
+
font-size: 100%;
|
|
63
|
+
line-height: inherit;
|
|
64
|
+
color: inherit;
|
|
65
|
+
margin: 0;
|
|
66
|
+
padding: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
button, select {
|
|
70
|
+
text-transform: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
button, [type='button'], [type='reset'], [type='submit'] {
|
|
74
|
+
-webkit-appearance: button;
|
|
75
|
+
background-color: transparent;
|
|
76
|
+
background-image: none;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
input:where([type='text'], [type='email'], [type='url'],
|
|
81
|
+
[type='password'], [type='number'], [type='search'],
|
|
82
|
+
[type='tel'], textarea, select) {
|
|
83
|
+
appearance: none;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Tables */
|
|
87
|
+
table {
|
|
88
|
+
text-indent: 0;
|
|
89
|
+
border-color: inherit;
|
|
90
|
+
border-collapse: collapse;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* HR */
|
|
94
|
+
hr {
|
|
95
|
+
height: 0;
|
|
96
|
+
color: inherit;
|
|
97
|
+
border-top-width: 1px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Paragraphs */
|
|
101
|
+
p { margin: 0; }
|
|
102
|
+
|
|
103
|
+
/* Links */
|
|
104
|
+
a { color: inherit; text-decoration: inherit; }
|
|
105
|
+
|
|
106
|
+
/* Code */
|
|
107
|
+
code, kbd, samp, pre {
|
|
108
|
+
font-family:
|
|
109
|
+
ui-monospace,
|
|
110
|
+
SFMono-Regular,
|
|
111
|
+
Menlo,
|
|
112
|
+
Monaco,
|
|
113
|
+
Consolas,
|
|
114
|
+
monospace;
|
|
115
|
+
font-size: 1em;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Accessibility */
|
|
119
|
+
:focus-visible {
|
|
120
|
+
outline: 2px solid var(--๐ต, #2563eb);
|
|
121
|
+
outline-offset: 2px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Screen-reader only utility */
|
|
125
|
+
.๐ {
|
|
126
|
+
position: absolute;
|
|
127
|
+
width: 1px;
|
|
128
|
+
height: 1px;
|
|
129
|
+
padding: 0;
|
|
130
|
+
margin: -1px;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
clip: rect(0, 0, 0, 0);
|
|
133
|
+
white-space: nowrap;
|
|
134
|
+
border-width: 0;
|
|
135
|
+
}
|
|
@@ -0,0 +1,715 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BEMoji Component Library
|
|
3
|
+
* 24 production-ready components, all using emoji class names.
|
|
4
|
+
*
|
|
5
|
+
* @import 'bemoji/components';
|
|
6
|
+
*
|
|
7
|
+
* Requires bemoji/tokens to be imported first.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
11
|
+
๐ BUTTON
|
|
12
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
13
|
+
|
|
14
|
+
.๐ {
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
gap: var(--๐-2);
|
|
19
|
+
padding: var(--๐-2) var(--๐-4);
|
|
20
|
+
font-size: var(--โ๏ธ-sm);
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
line-height: 1.25;
|
|
23
|
+
border-radius: var(--โญ-md);
|
|
24
|
+
border: 1.5px solid transparent;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
transition: var(--โก-base);
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
user-select: none;
|
|
30
|
+
background: var(--๐ฉถ-light);
|
|
31
|
+
color: var(--โซ);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.๐:hover { filter: brightness(0.95); }
|
|
35
|
+
.๐:active { transform: scale(0.98); }
|
|
36
|
+
.๐:focus-visible { outline: 2px solid var(--๐ต); outline-offset: 2px; }
|
|
37
|
+
|
|
38
|
+
/* Sizes */
|
|
39
|
+
.๐--๐ฌ { padding: var(--๐-1) var(--๐-2); font-size: var(--โ๏ธ-xs); }
|
|
40
|
+
.๐--๐ค { padding: calc(var(--๐-1) + 2px) var(--๐-3); font-size: var(--โ๏ธ-sm); }
|
|
41
|
+
.๐--๐๏ธ { padding: var(--๐-3) var(--๐-6); font-size: var(--โ๏ธ-base); }
|
|
42
|
+
.๐--๐๏ธ { padding: var(--๐-4) var(--๐-8); font-size: var(--โ๏ธ-lg); }
|
|
43
|
+
|
|
44
|
+
/* Semantic variants */
|
|
45
|
+
.๐--๐ { background: var(--๐ต); color: #fff; border-color: var(--๐ต); }
|
|
46
|
+
.๐--๐ด { background: var(--๐ด); color: #fff; border-color: var(--๐ด); }
|
|
47
|
+
.๐--๐ข { background: var(--๐ข); color: #fff; border-color: var(--๐ข); }
|
|
48
|
+
.๐--๐ก { background: var(--๐ก); color: #fff; border-color: var(--๐ก); }
|
|
49
|
+
.๐--๐ฃ { background: var(--๐ฃ); color: #fff; border-color: var(--๐ฃ); }
|
|
50
|
+
|
|
51
|
+
/* Ghost / outline */
|
|
52
|
+
.๐--๐๏ธ {
|
|
53
|
+
background: transparent;
|
|
54
|
+
border-color: currentColor;
|
|
55
|
+
color: var(--โซ);
|
|
56
|
+
}
|
|
57
|
+
.๐--๐๏ธ:hover { background: var(--๐ฉถ-light); }
|
|
58
|
+
|
|
59
|
+
/* Disabled */
|
|
60
|
+
.๐--๐ป,
|
|
61
|
+
.๐:disabled {
|
|
62
|
+
opacity: 0.5;
|
|
63
|
+
cursor: not-allowed;
|
|
64
|
+
pointer-events: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Loading */
|
|
68
|
+
.๐--โณ {
|
|
69
|
+
cursor: wait;
|
|
70
|
+
opacity: 0.8;
|
|
71
|
+
}
|
|
72
|
+
.๐--โณ::after {
|
|
73
|
+
content: '';
|
|
74
|
+
display: inline-block;
|
|
75
|
+
width: 0.875em;
|
|
76
|
+
height: 0.875em;
|
|
77
|
+
border: 2px solid currentColor;
|
|
78
|
+
border-right-color: transparent;
|
|
79
|
+
border-radius: 50%;
|
|
80
|
+
animation: ๐-spin 0.6s linear infinite;
|
|
81
|
+
margin-left: var(--๐-2);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Pill shape */
|
|
85
|
+
.๐--๐ { border-radius: var(--โญ-full); }
|
|
86
|
+
|
|
87
|
+
/* Full width */
|
|
88
|
+
.๐--๐ { width: 100%; }
|
|
89
|
+
|
|
90
|
+
/* Icon only */
|
|
91
|
+
.๐--๐ญ { padding: var(--๐-2); aspect-ratio: 1; }
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
95
|
+
๐ CARD
|
|
96
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
97
|
+
|
|
98
|
+
.๐ {
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
border-radius: var(--โญ-xl);
|
|
102
|
+
overflow: hidden;
|
|
103
|
+
background: var(--โฌ);
|
|
104
|
+
box-shadow: var(--๐-md);
|
|
105
|
+
transition: var(--โก-slow);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.๐--๐ { box-shadow: var(--๐-xl); }
|
|
109
|
+
.๐--โ๏ธ { box-shadow: var(--๐-2xl); }
|
|
110
|
+
.๐--โฌ { box-shadow: none; border: 1px solid var(--๐ฉถ-light); }
|
|
111
|
+
|
|
112
|
+
.๐__๐ผ๏ธ {
|
|
113
|
+
width: 100%;
|
|
114
|
+
overflow: hidden;
|
|
115
|
+
flex-shrink: 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.๐__๐ผ๏ธ img {
|
|
119
|
+
width: 100%;
|
|
120
|
+
height: 100%;
|
|
121
|
+
object-fit: cover;
|
|
122
|
+
display: block;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.๐__๐ผ๏ธ--๐ {
|
|
126
|
+
outline: 3px solid var(--๐ต);
|
|
127
|
+
outline-offset: -3px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.๐__๐ {
|
|
131
|
+
padding: var(--๐-6);
|
|
132
|
+
flex: 1;
|
|
133
|
+
display: flex;
|
|
134
|
+
flex-direction: column;
|
|
135
|
+
gap: var(--๐-2);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.๐__๐ {
|
|
139
|
+
font-size: var(--โ๏ธ-xl);
|
|
140
|
+
font-weight: 700;
|
|
141
|
+
line-height: var(--๐-tight);
|
|
142
|
+
color: var(--โซ);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.๐__๐ {
|
|
146
|
+
font-size: var(--โ๏ธ-sm);
|
|
147
|
+
color: var(--๐ฉถ);
|
|
148
|
+
line-height: var(--๐-relaxed);
|
|
149
|
+
flex: 1;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.๐__๐ฆถ {
|
|
153
|
+
padding: var(--๐-4) var(--๐-6);
|
|
154
|
+
border-top: 1px solid var(--๐ฉถ-light);
|
|
155
|
+
display: flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
gap: var(--๐-3);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.๐__๐ท๏ธ { margin-left: auto; }
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
164
|
+
๐ท๏ธ BADGE
|
|
165
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
166
|
+
|
|
167
|
+
.๐ท๏ธ {
|
|
168
|
+
display: inline-flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
gap: var(--๐-1);
|
|
171
|
+
padding: var(--๐-1) var(--๐-2\\.5);
|
|
172
|
+
font-size: var(--โ๏ธ-xs);
|
|
173
|
+
font-weight: 600;
|
|
174
|
+
line-height: 1;
|
|
175
|
+
border-radius: var(--โญ-full);
|
|
176
|
+
background: var(--๐ฉถ-light);
|
|
177
|
+
color: var(--๐ฉถ-dark);
|
|
178
|
+
white-space: nowrap;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.๐ท๏ธ--๐ { background: var(--๐ต-light); color: var(--๐ต-dark); }
|
|
182
|
+
.๐ท๏ธ--๐ด { background: var(--๐ด-light); color: var(--๐ด-dark); }
|
|
183
|
+
.๐ท๏ธ--๐ข { background: var(--๐ข-light); color: var(--๐ข-dark); }
|
|
184
|
+
.๐ท๏ธ--๐ก { background: var(--๐ก-light); color: var(--๐ก-dark); }
|
|
185
|
+
.๐ท๏ธ--๐ต { background: var(--๐ต-light); color: var(--๐ต-dark); }
|
|
186
|
+
.๐ท๏ธ--๐ฃ { background: var(--๐ฃ-light); color: var(--๐ฃ-dark); }
|
|
187
|
+
.๐ท๏ธ--๐ฅ { background: #fff3e0; color: #e65100; }
|
|
188
|
+
.๐ท๏ธ--๐ { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
|
|
189
|
+
.๐ท๏ธ--๐ { background: var(--๐ข-light); color: var(--๐ข-dark); }
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
193
|
+
๐ ALERT
|
|
194
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
195
|
+
|
|
196
|
+
.๐ {
|
|
197
|
+
display: flex;
|
|
198
|
+
gap: var(--๐-3);
|
|
199
|
+
align-items: flex-start;
|
|
200
|
+
padding: var(--๐-4);
|
|
201
|
+
border-radius: var(--โญ-lg);
|
|
202
|
+
border: 1px solid transparent;
|
|
203
|
+
font-size: var(--โ๏ธ-sm);
|
|
204
|
+
background: var(--๐ฉถ-light);
|
|
205
|
+
color: var(--โซ);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.๐__๐ญ { flex-shrink: 0; font-size: 1.1em; }
|
|
209
|
+
.๐__๐ { flex: 1; }
|
|
210
|
+
.๐__๐ { font-weight: 600; margin-bottom: var(--๐-1); }
|
|
211
|
+
.๐__โ๏ธ { margin-left: auto; cursor: pointer; opacity: 0.6; flex-shrink: 0; }
|
|
212
|
+
.๐__โ๏ธ:hover { opacity: 1; }
|
|
213
|
+
|
|
214
|
+
.๐--๐ { background: var(--๐ต-light); border-color: var(--๐ต); color: var(--๐ต-dark); }
|
|
215
|
+
.๐--๐ด { background: var(--๐ด-light); border-color: var(--๐ด); color: var(--๐ด-dark); }
|
|
216
|
+
.๐--๐ข { background: var(--๐ข-light); border-color: var(--๐ข); color: var(--๐ข-dark); }
|
|
217
|
+
.๐--๐ก { background: var(--๐ก-light); border-color: var(--๐ก); color: var(--๐ก-dark); }
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
221
|
+
๐ FORM
|
|
222
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
223
|
+
|
|
224
|
+
.๐ {
|
|
225
|
+
display: flex;
|
|
226
|
+
flex-direction: column;
|
|
227
|
+
gap: var(--๐-6);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.๐__๐ {
|
|
231
|
+
display: flex;
|
|
232
|
+
flex-direction: column;
|
|
233
|
+
gap: var(--๐-1\\.5);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.๐__๐ท๏ธ {
|
|
237
|
+
font-size: var(--โ๏ธ-sm);
|
|
238
|
+
font-weight: 500;
|
|
239
|
+
color: var(--โซ);
|
|
240
|
+
display: flex;
|
|
241
|
+
align-items: center;
|
|
242
|
+
gap: var(--๐-1);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.๐__โ {
|
|
246
|
+
color: var(--๐ด);
|
|
247
|
+
font-size: var(--โ๏ธ-xs);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* ๐ฅ INPUT */
|
|
251
|
+
.๐ฅ {
|
|
252
|
+
display: block;
|
|
253
|
+
width: 100%;
|
|
254
|
+
padding: var(--๐-2) var(--๐-3);
|
|
255
|
+
font-size: var(--โ๏ธ-sm);
|
|
256
|
+
line-height: 1.5;
|
|
257
|
+
color: var(--โซ);
|
|
258
|
+
background: var(--โฌ);
|
|
259
|
+
border: 1.5px solid #d1d5db;
|
|
260
|
+
border-radius: var(--โญ-md);
|
|
261
|
+
transition: var(--โก-base);
|
|
262
|
+
appearance: none;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.๐ฅ:hover { border-color: #9ca3af; }
|
|
266
|
+
.๐ฅ:focus { outline: none; border-color: var(--๐ต); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
|
|
267
|
+
|
|
268
|
+
.๐ฅ--๐ข { border-color: var(--๐ข); }
|
|
269
|
+
.๐ฅ--๐ข:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
|
|
270
|
+
.๐ฅ--๐ด { border-color: var(--๐ด); }
|
|
271
|
+
.๐ฅ--๐ด:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
|
|
272
|
+
.๐ฅ--๐ป { opacity: 0.5; cursor: not-allowed; background: var(--๐ฉถ-light); }
|
|
273
|
+
|
|
274
|
+
.๐__๐ก {
|
|
275
|
+
font-size: var(--โ๏ธ-xs);
|
|
276
|
+
color: var(--๐ฉถ);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.๐__๐จ {
|
|
280
|
+
font-size: var(--โ๏ธ-xs);
|
|
281
|
+
color: var(--๐ด);
|
|
282
|
+
display: flex;
|
|
283
|
+
align-items: center;
|
|
284
|
+
gap: var(--๐-1);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
289
|
+
๐งญ NAVBAR
|
|
290
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
291
|
+
|
|
292
|
+
.๐งญ {
|
|
293
|
+
display: flex;
|
|
294
|
+
align-items: center;
|
|
295
|
+
padding: 0 var(--๐-6);
|
|
296
|
+
height: 64px;
|
|
297
|
+
background: var(--โฌ);
|
|
298
|
+
border-bottom: 1px solid var(--๐ฉถ-light);
|
|
299
|
+
box-shadow: var(--๐-sm);
|
|
300
|
+
position: relative;
|
|
301
|
+
z-index: var(--๐๏ธ-10);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.๐งญ--๐ถ๏ธ {
|
|
305
|
+
background: var(--โฌ);
|
|
306
|
+
border-color: rgba(255,255,255,0.1);
|
|
307
|
+
color: #fff;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.๐งญ__๐ {
|
|
311
|
+
font-size: var(--โ๏ธ-xl);
|
|
312
|
+
font-weight: 800;
|
|
313
|
+
letter-spacing: -0.025em;
|
|
314
|
+
text-decoration: none;
|
|
315
|
+
color: inherit;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.๐งญ__๐ {
|
|
319
|
+
display: flex;
|
|
320
|
+
align-items: center;
|
|
321
|
+
gap: var(--๐-1);
|
|
322
|
+
margin-left: var(--๐-8);
|
|
323
|
+
flex: 1;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.๐งญ__๐ {
|
|
327
|
+
display: inline-flex;
|
|
328
|
+
align-items: center;
|
|
329
|
+
padding: var(--๐-2) var(--๐-3);
|
|
330
|
+
font-size: var(--โ๏ธ-sm);
|
|
331
|
+
font-weight: 500;
|
|
332
|
+
text-decoration: none;
|
|
333
|
+
color: var(--๐ฉถ-dark);
|
|
334
|
+
border-radius: var(--โญ-md);
|
|
335
|
+
transition: var(--โก-base);
|
|
336
|
+
}
|
|
337
|
+
.๐งญ__๐:hover { background: var(--๐ฉถ-light); color: var(--โซ); }
|
|
338
|
+
.๐งญ__๐--โ
{ background: var(--๐ต-light); color: var(--๐ต); }
|
|
339
|
+
|
|
340
|
+
.๐งญ__โก {
|
|
341
|
+
margin-left: auto;
|
|
342
|
+
display: flex;
|
|
343
|
+
align-items: center;
|
|
344
|
+
gap: var(--๐-3);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
349
|
+
๐ช MODAL
|
|
350
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
351
|
+
|
|
352
|
+
.๐ช {
|
|
353
|
+
position: fixed;
|
|
354
|
+
inset: 0;
|
|
355
|
+
z-index: var(--๐๏ธ-modal);
|
|
356
|
+
display: flex;
|
|
357
|
+
align-items: center;
|
|
358
|
+
justify-content: center;
|
|
359
|
+
padding: var(--๐-6);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.๐ช__๐ซ๏ธ {
|
|
363
|
+
position: absolute;
|
|
364
|
+
inset: 0;
|
|
365
|
+
background: rgba(0,0,0,0.5);
|
|
366
|
+
backdrop-filter: blur(2px);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.๐ช__๐ {
|
|
370
|
+
position: relative;
|
|
371
|
+
background: var(--โฌ);
|
|
372
|
+
border-radius: var(--โญ-2xl);
|
|
373
|
+
box-shadow: var(--๐-2xl);
|
|
374
|
+
max-width: 540px;
|
|
375
|
+
width: 100%;
|
|
376
|
+
max-height: 90vh;
|
|
377
|
+
overflow-y: auto;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.๐ช__๐ช {
|
|
381
|
+
display: flex;
|
|
382
|
+
align-items: center;
|
|
383
|
+
justify-content: space-between;
|
|
384
|
+
padding: var(--๐-6);
|
|
385
|
+
border-bottom: 1px solid var(--๐ฉถ-light);
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.๐ช__๐ {
|
|
389
|
+
font-size: var(--โ๏ธ-xl);
|
|
390
|
+
font-weight: 700;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.๐ช__โ๏ธ {
|
|
394
|
+
cursor: pointer;
|
|
395
|
+
opacity: 0.5;
|
|
396
|
+
transition: var(--โก-base);
|
|
397
|
+
font-size: 1.25rem;
|
|
398
|
+
background: none;
|
|
399
|
+
border: none;
|
|
400
|
+
padding: var(--๐-1);
|
|
401
|
+
}
|
|
402
|
+
.๐ช__โ๏ธ:hover { opacity: 1; }
|
|
403
|
+
|
|
404
|
+
.๐ช__๐ {
|
|
405
|
+
padding: var(--๐-6);
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.๐ช__๐ฆถ {
|
|
409
|
+
padding: var(--๐-4) var(--๐-6);
|
|
410
|
+
border-top: 1px solid var(--๐ฉถ-light);
|
|
411
|
+
display: flex;
|
|
412
|
+
justify-content: flex-end;
|
|
413
|
+
gap: var(--๐-3);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
|
|
417
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
418
|
+
๐ TABS
|
|
419
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
420
|
+
|
|
421
|
+
.๐ { display: flex; flex-direction: column; }
|
|
422
|
+
|
|
423
|
+
.๐__๐ช {
|
|
424
|
+
display: flex;
|
|
425
|
+
border-bottom: 1px solid var(--๐ฉถ-light);
|
|
426
|
+
overflow-x: auto;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.๐__๐ {
|
|
430
|
+
display: inline-flex;
|
|
431
|
+
align-items: center;
|
|
432
|
+
gap: var(--๐-2);
|
|
433
|
+
padding: var(--๐-3) var(--๐-4);
|
|
434
|
+
font-size: var(--โ๏ธ-sm);
|
|
435
|
+
font-weight: 500;
|
|
436
|
+
color: var(--๐ฉถ-dark);
|
|
437
|
+
border-bottom: 2px solid transparent;
|
|
438
|
+
cursor: pointer;
|
|
439
|
+
transition: var(--โก-base);
|
|
440
|
+
white-space: nowrap;
|
|
441
|
+
background: none;
|
|
442
|
+
border-top: none;
|
|
443
|
+
border-left: none;
|
|
444
|
+
border-right: none;
|
|
445
|
+
margin-bottom: -1px;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.๐__๐:hover { color: var(--โซ); }
|
|
449
|
+
.๐__๐--โ
{ color: var(--๐ต); border-bottom-color: var(--๐ต); }
|
|
450
|
+
|
|
451
|
+
.๐__๐ { padding: var(--๐-6) 0; }
|
|
452
|
+
|
|
453
|
+
.๐__๐ { display: none; }
|
|
454
|
+
.๐__๐--โ
{ display: block; }
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
458
|
+
๐ฌ TOOLTIP
|
|
459
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
460
|
+
|
|
461
|
+
.๐ฌ {
|
|
462
|
+
position: relative;
|
|
463
|
+
display: inline-block;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.๐ฌ__๐ {
|
|
467
|
+
position: absolute;
|
|
468
|
+
bottom: calc(100% + 8px);
|
|
469
|
+
left: 50%;
|
|
470
|
+
transform: translateX(-50%);
|
|
471
|
+
background: var(--โซ);
|
|
472
|
+
color: #fff;
|
|
473
|
+
font-size: var(--โ๏ธ-xs);
|
|
474
|
+
padding: var(--๐-1\\.5) var(--๐-2\\.5);
|
|
475
|
+
border-radius: var(--โญ-md);
|
|
476
|
+
white-space: nowrap;
|
|
477
|
+
pointer-events: none;
|
|
478
|
+
opacity: 0;
|
|
479
|
+
transition: opacity 0.15s ease;
|
|
480
|
+
z-index: var(--๐๏ธ-tooltip);
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.๐ฌ__๐::after {
|
|
484
|
+
content: '';
|
|
485
|
+
position: absolute;
|
|
486
|
+
top: 100%;
|
|
487
|
+
left: 50%;
|
|
488
|
+
transform: translateX(-50%);
|
|
489
|
+
border: 5px solid transparent;
|
|
490
|
+
border-top-color: var(--โซ);
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.๐ฌ:hover .๐ฌ__๐ { opacity: 1; }
|
|
494
|
+
|
|
495
|
+
.๐ฌ--๐ด .๐ฌ__๐ { background: var(--๐ด); }
|
|
496
|
+
.๐ฌ--๐ด .๐ฌ__๐::after { border-top-color: var(--๐ด); }
|
|
497
|
+
|
|
498
|
+
|
|
499
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
500
|
+
๐ BREADCRUMB
|
|
501
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
502
|
+
|
|
503
|
+
.๐ {
|
|
504
|
+
display: flex;
|
|
505
|
+
align-items: center;
|
|
506
|
+
flex-wrap: wrap;
|
|
507
|
+
gap: var(--๐-1);
|
|
508
|
+
font-size: var(--โ๏ธ-sm);
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.๐__๐ {
|
|
512
|
+
display: flex;
|
|
513
|
+
align-items: center;
|
|
514
|
+
gap: var(--๐-1);
|
|
515
|
+
color: var(--๐ฉถ);
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.๐__๐::after {
|
|
519
|
+
content: '/';
|
|
520
|
+
opacity: 0.4;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.๐__๐:last-child { color: var(--โซ); font-weight: 500; }
|
|
524
|
+
.๐__๐:last-child::after { content: none; }
|
|
525
|
+
|
|
526
|
+
.๐__๐ {
|
|
527
|
+
text-decoration: none;
|
|
528
|
+
color: inherit;
|
|
529
|
+
transition: var(--โก-base);
|
|
530
|
+
}
|
|
531
|
+
.๐__๐:hover { color: var(--๐ต); }
|
|
532
|
+
|
|
533
|
+
|
|
534
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
535
|
+
๐ถ PROGRESS
|
|
536
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
537
|
+
|
|
538
|
+
.๐ถ {
|
|
539
|
+
display: flex;
|
|
540
|
+
flex-direction: column;
|
|
541
|
+
gap: var(--๐-1\\.5);
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
.๐ถ__๐ {
|
|
545
|
+
display: flex;
|
|
546
|
+
justify-content: space-between;
|
|
547
|
+
font-size: var(--โ๏ธ-sm);
|
|
548
|
+
font-weight: 500;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.๐ถ__๐ผ๏ธ {
|
|
552
|
+
height: 8px;
|
|
553
|
+
background: var(--๐ฉถ-light);
|
|
554
|
+
border-radius: var(--โญ-full);
|
|
555
|
+
overflow: hidden;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.๐ถ__๐ {
|
|
559
|
+
height: 100%;
|
|
560
|
+
background: var(--๐ต);
|
|
561
|
+
border-radius: var(--โญ-full);
|
|
562
|
+
transition: width 0.3s ease;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
.๐ถ--๐ด .๐ถ__๐ { background: var(--๐ด); }
|
|
566
|
+
.๐ถ--๐ข .๐ถ__๐ { background: var(--๐ข); }
|
|
567
|
+
.๐ถ--๐ก .๐ถ__๐ { background: var(--๐ก); }
|
|
568
|
+
.๐ถ--๐ฃ .๐ถ__๐ { background: var(--๐ฃ); }
|
|
569
|
+
|
|
570
|
+
|
|
571
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
572
|
+
๐ค AVATAR
|
|
573
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
574
|
+
|
|
575
|
+
.๐ค {
|
|
576
|
+
position: relative;
|
|
577
|
+
display: inline-flex;
|
|
578
|
+
align-items: center;
|
|
579
|
+
justify-content: center;
|
|
580
|
+
width: 40px;
|
|
581
|
+
height: 40px;
|
|
582
|
+
border-radius: 50%;
|
|
583
|
+
background: var(--๐ต-light);
|
|
584
|
+
color: var(--๐ต);
|
|
585
|
+
font-weight: 700;
|
|
586
|
+
font-size: var(--โ๏ธ-sm);
|
|
587
|
+
overflow: hidden;
|
|
588
|
+
flex-shrink: 0;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.๐ค--๐ฌ { width: 24px; height: 24px; font-size: var(--โ๏ธ-xs); }
|
|
592
|
+
.๐ค--๐ค { width: 32px; height: 32px; font-size: var(--โ๏ธ-xs); }
|
|
593
|
+
.๐ค--๐๏ธ { width: 48px; height: 48px; font-size: var(--โ๏ธ-base); }
|
|
594
|
+
.๐ค--๐๏ธ { width: 64px; height: 64px; font-size: var(--โ๏ธ-lg); }
|
|
595
|
+
.๐ค--๐ { width: 80px; height: 80px; font-size: var(--โ๏ธ-xl); }
|
|
596
|
+
|
|
597
|
+
.๐ค img { width: 100%; height: 100%; object-fit: cover; }
|
|
598
|
+
|
|
599
|
+
.๐ค__๐ข {
|
|
600
|
+
position: absolute;
|
|
601
|
+
bottom: 0;
|
|
602
|
+
right: 0;
|
|
603
|
+
width: 10px;
|
|
604
|
+
height: 10px;
|
|
605
|
+
border-radius: 50%;
|
|
606
|
+
background: var(--๐ข);
|
|
607
|
+
border: 2px solid white;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.๐ค__๐ข--๐ด { background: var(--๐ด); }
|
|
611
|
+
.๐ค__๐ข--๐ก { background: var(--๐ก); }
|
|
612
|
+
.๐ค__๐ข--โฌ { background: var(--๐ฉถ); }
|
|
613
|
+
|
|
614
|
+
|
|
615
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
616
|
+
๐ TABLE
|
|
617
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
618
|
+
|
|
619
|
+
.๐ {
|
|
620
|
+
width: 100%;
|
|
621
|
+
border-collapse: collapse;
|
|
622
|
+
font-size: var(--โ๏ธ-sm);
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.๐__๐ช { }
|
|
626
|
+
|
|
627
|
+
.๐__๐ {
|
|
628
|
+
text-align: left;
|
|
629
|
+
padding: var(--๐-3) var(--๐-4);
|
|
630
|
+
font-weight: 600;
|
|
631
|
+
color: var(--๐ฉถ-dark);
|
|
632
|
+
font-size: var(--โ๏ธ-xs);
|
|
633
|
+
letter-spacing: 0.05em;
|
|
634
|
+
text-transform: uppercase;
|
|
635
|
+
border-bottom: 2px solid var(--๐ฉถ-light);
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.๐__๐ { border-bottom: 1px solid var(--๐ฉถ-light); transition: var(--โก-fast); }
|
|
639
|
+
.๐__๐:hover { background: var(--๐ฉถ-light); }
|
|
640
|
+
.๐__๐--โ
{ background: var(--๐ต-light); }
|
|
641
|
+
|
|
642
|
+
.๐__๐ {
|
|
643
|
+
padding: var(--๐-3) var(--๐-4);
|
|
644
|
+
color: var(--โซ);
|
|
645
|
+
vertical-align: middle;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.๐--โฌ { border: 1px solid var(--๐ฉถ-light); border-radius: var(--โญ-lg); overflow: hidden; }
|
|
649
|
+
.๐--โฌ .๐__๐ { background: var(--๐ฉถ-light); }
|
|
650
|
+
|
|
651
|
+
|
|
652
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
653
|
+
๐ PAGINATION
|
|
654
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
655
|
+
|
|
656
|
+
.๐ {
|
|
657
|
+
display: flex;
|
|
658
|
+
align-items: center;
|
|
659
|
+
gap: var(--๐-1);
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.๐__๐ {
|
|
663
|
+
display: inline-flex;
|
|
664
|
+
align-items: center;
|
|
665
|
+
justify-content: center;
|
|
666
|
+
width: 36px;
|
|
667
|
+
height: 36px;
|
|
668
|
+
border-radius: var(--โญ-md);
|
|
669
|
+
font-size: var(--โ๏ธ-sm);
|
|
670
|
+
font-weight: 500;
|
|
671
|
+
background: none;
|
|
672
|
+
border: 1.5px solid transparent;
|
|
673
|
+
cursor: pointer;
|
|
674
|
+
color: var(--๐ฉถ-dark);
|
|
675
|
+
transition: var(--โก-base);
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
.๐__๐:hover { background: var(--๐ฉถ-light); color: var(--โซ); }
|
|
679
|
+
.๐__๐--โ
{ background: var(--๐ต); color: #fff; border-color: var(--๐ต); }
|
|
680
|
+
.๐__๐--๐ป { opacity: 0.4; cursor: not-allowed; }
|
|
681
|
+
|
|
682
|
+
|
|
683
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
684
|
+
๐ SKELETON (loading placeholder)
|
|
685
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
686
|
+
|
|
687
|
+
@keyframes ๐-pulse {
|
|
688
|
+
0%, 100% { opacity: 1; }
|
|
689
|
+
50% { opacity: 0.4; }
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.๐ {
|
|
693
|
+
background: var(--๐ฉถ-light);
|
|
694
|
+
border-radius: var(--โญ-md);
|
|
695
|
+
animation: ๐-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
.๐--๐ { height: 1.25em; width: 60%; }
|
|
699
|
+
.๐--๐ { height: 1em; width: 100%; }
|
|
700
|
+
.๐--๐ผ๏ธ { aspect-ratio: 16/9; width: 100%; }
|
|
701
|
+
.๐--๐ค { width: 40px; height: 40px; border-radius: 50%; }
|
|
702
|
+
.๐--๐ { height: 36px; width: 80px; }
|
|
703
|
+
|
|
704
|
+
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
705
|
+
๐ Keyframes
|
|
706
|
+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
707
|
+
|
|
708
|
+
@keyframes ๐-spin {
|
|
709
|
+
to { transform: rotate(360deg); }
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
@keyframes ๐-fadeIn {
|
|
713
|
+
from { opacity: 0; transform: translateY(-8px); }
|
|
714
|
+
to { opacity: 1; transform: translateY(0); }
|
|
715
|
+
}
|
package/css/tokens.css
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BEMoji Design Tokens
|
|
3
|
+
* All custom properties use emoji identifiers.
|
|
4
|
+
*
|
|
5
|
+
* Import this file in your project:
|
|
6
|
+
* @import 'bemoji/tokens';
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
:root {
|
|
10
|
+
/* โโ Colors โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
11
|
+
--โฌ: #0d0d0f;
|
|
12
|
+
--โฌ: #ffffff;
|
|
13
|
+
--๐ด: #dc2626;
|
|
14
|
+
--๐ด-light: #fef2f2;
|
|
15
|
+
--๐ด-dark: #991b1b;
|
|
16
|
+
--๐ข: #16a34a;
|
|
17
|
+
--๐ข-light: #f0fdf4;
|
|
18
|
+
--๐ข-dark: #14532d;
|
|
19
|
+
--๐ก: #d97706;
|
|
20
|
+
--๐ก-light: #fffbeb;
|
|
21
|
+
--๐ก-dark: #92400e;
|
|
22
|
+
--๐ต: #2563eb;
|
|
23
|
+
--๐ต-light: #eff6ff;
|
|
24
|
+
--๐ต-dark: #1e3a8a;
|
|
25
|
+
--๐ฃ: #7c3aed;
|
|
26
|
+
--๐ฃ-light: #f5f3ff;
|
|
27
|
+
--๐ฃ-dark: #4c1d95;
|
|
28
|
+
--๐ : #ea580c;
|
|
29
|
+
--โซ: #111827;
|
|
30
|
+
--๐ฉถ: #6b7280;
|
|
31
|
+
--๐ฉถ-light: #f3f4f6;
|
|
32
|
+
--๐ฉถ-dark: #374151;
|
|
33
|
+
|
|
34
|
+
/* โโ Spacing โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
35
|
+
--๐-px: 1px;
|
|
36
|
+
--๐-0: 0;
|
|
37
|
+
--๐-0\\.5: 0.125rem; /* 2px */
|
|
38
|
+
--๐-1: 0.25rem; /* 4px */
|
|
39
|
+
--๐-1\\.5: 0.375rem; /* 6px */
|
|
40
|
+
--๐-2: 0.5rem; /* 8px */
|
|
41
|
+
--๐-2\\.5: 0.625rem; /* 10px */
|
|
42
|
+
--๐-3: 0.75rem; /* 12px */
|
|
43
|
+
--๐-4: 1rem; /* 16px */
|
|
44
|
+
--๐-5: 1.25rem; /* 20px */
|
|
45
|
+
--๐-6: 1.5rem; /* 24px */
|
|
46
|
+
--๐-7: 1.75rem; /* 28px */
|
|
47
|
+
--๐-8: 2rem; /* 32px */
|
|
48
|
+
--๐-10: 2.5rem; /* 40px */
|
|
49
|
+
--๐-12: 3rem; /* 48px */
|
|
50
|
+
--๐-14: 3.5rem; /* 56px */
|
|
51
|
+
--๐-16: 4rem; /* 64px */
|
|
52
|
+
--๐-20: 5rem; /* 80px */
|
|
53
|
+
--๐-24: 6rem; /* 96px */
|
|
54
|
+
--๐-32: 8rem; /* 128px */
|
|
55
|
+
|
|
56
|
+
/* โโ Typography โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
57
|
+
--โ๏ธ-xs: 0.75rem; /* 12px */
|
|
58
|
+
--โ๏ธ-sm: 0.875rem; /* 14px */
|
|
59
|
+
--โ๏ธ-base: 1rem; /* 16px */
|
|
60
|
+
--โ๏ธ-lg: 1.125rem; /* 18px */
|
|
61
|
+
--โ๏ธ-xl: 1.25rem; /* 20px */
|
|
62
|
+
--โ๏ธ-2xl: 1.5rem; /* 24px */
|
|
63
|
+
--โ๏ธ-3xl: 1.875rem; /* 30px */
|
|
64
|
+
--โ๏ธ-4xl: 2.25rem; /* 36px */
|
|
65
|
+
--โ๏ธ-5xl: 3rem; /* 48px */
|
|
66
|
+
--โ๏ธ-6xl: 3.75rem; /* 60px */
|
|
67
|
+
|
|
68
|
+
--๐-tight: 1.25;
|
|
69
|
+
--๐-snug: 1.375;
|
|
70
|
+
--๐-normal: 1.5;
|
|
71
|
+
--๐-relaxed: 1.625;
|
|
72
|
+
--๐-loose: 2;
|
|
73
|
+
|
|
74
|
+
/* โโ Shadows โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
75
|
+
--๐-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
76
|
+
--๐-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
77
|
+
--๐-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
78
|
+
--๐-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
79
|
+
--๐-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
|
|
80
|
+
--๐-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
|
|
81
|
+
--๐-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
82
|
+
--๐-none: none;
|
|
83
|
+
|
|
84
|
+
/* โโ Border Radius โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
85
|
+
--โญ-none: 0;
|
|
86
|
+
--โญ-sm: 0.125rem; /* 2px */
|
|
87
|
+
--โญ-md: 0.375rem; /* 6px */
|
|
88
|
+
--โญ-lg: 0.5rem; /* 8px */
|
|
89
|
+
--โญ-xl: 0.75rem; /* 12px */
|
|
90
|
+
--โญ-2xl: 1rem; /* 16px */
|
|
91
|
+
--โญ-3xl: 1.5rem; /* 24px */
|
|
92
|
+
--โญ-full: 9999px;
|
|
93
|
+
|
|
94
|
+
/* โโ Transitions โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
95
|
+
--โก-fast: all 0.1s ease;
|
|
96
|
+
--โก-base: all 0.15s ease;
|
|
97
|
+
--โก-slow: all 0.3s ease;
|
|
98
|
+
--โก-slower: all 0.5s ease;
|
|
99
|
+
|
|
100
|
+
/* โโ Z-index โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
|
|
101
|
+
--๐๏ธ-0: 0;
|
|
102
|
+
--๐๏ธ-10: 10;
|
|
103
|
+
--๐๏ธ-20: 20;
|
|
104
|
+
--๐๏ธ-30: 30;
|
|
105
|
+
--๐๏ธ-40: 40;
|
|
106
|
+
--๐๏ธ-50: 50;
|
|
107
|
+
--๐๏ธ-modal: 1000;
|
|
108
|
+
--๐๏ธ-toast: 1100;
|
|
109
|
+
--๐๏ธ-tooltip: 1200;
|
|
110
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "bemoji",
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
|
+
"description": "BEMoji โ BEM methodology with emoji class names. Core framework.",
|
|
5
|
+
"main": "src/index.js",
|
|
6
|
+
"module": "src/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./src/index.js",
|
|
9
|
+
"./react": "./src/react.js",
|
|
10
|
+
"./base": "./css/base.css",
|
|
11
|
+
"./tokens": "./css/tokens.css",
|
|
12
|
+
"./components": "./css/components.css",
|
|
13
|
+
"./utilities": "./css/utilities.css"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"test": "vitest run --passWithNoTests",
|
|
17
|
+
"test:watch": "vitest"
|
|
18
|
+
},
|
|
19
|
+
"keywords": ["css", "bem", "emoji", "framework", "design-system"],
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"files": [
|
|
22
|
+
"src/",
|
|
23
|
+
"css/"
|
|
24
|
+
]
|
|
25
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BEMoji โ Core Package
|
|
3
|
+
* @version 1.0.0-beta.1
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export { encode, decode, escapeForCSS, toSelector, loadConfig } from './resolver.js';
|
|
7
|
+
export { BLOCKS, ELEMENTS, MODIFIERS, BREAKPOINTS, UTILITIES } from './vocabulary.js';
|
|
8
|
+
export { default as vocabulary } from './vocabulary.js';
|
package/src/react.js
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BEMoji React Helper
|
|
3
|
+
*
|
|
4
|
+
* Provides the `bem()` utility function for resolving readable BEM names
|
|
5
|
+
* to emoji class names within React/JSX components.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* import { bem } from 'bemoji/react';
|
|
9
|
+
*
|
|
10
|
+
* <div className={bem('card')}> // โ '๐'
|
|
11
|
+
* <div className={bem('card__image')}> // โ '๐__๐ผ๏ธ'
|
|
12
|
+
* <div className={bem('card', { primary: true })}> // โ '๐ ๐--๐'
|
|
13
|
+
* <div className={bem('card__image', { featured })}> // โ '๐__๐ผ๏ธ ๐__๐ผ๏ธ--๐'
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
import { encode, loadConfig } from './resolver.js';
|
|
17
|
+
|
|
18
|
+
let _config = loadConfig();
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Configure the React helper with a custom BEMoji config.
|
|
22
|
+
* Call this once at your app's entry point.
|
|
23
|
+
*
|
|
24
|
+
* @param {object} userConfig
|
|
25
|
+
*/
|
|
26
|
+
export function configure(userConfig) {
|
|
27
|
+
_config = loadConfig(userConfig);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Resolve a readable BEM name (with optional modifiers) to an emoji class string.
|
|
32
|
+
*
|
|
33
|
+
* @param {string} name Readable BEM name e.g. 'card', 'card__image', 'card__image--featured'
|
|
34
|
+
* @param {object} modifiers Object of modifier keys โ boolean
|
|
35
|
+
* @param {string} extra Additional raw class names to append
|
|
36
|
+
* @returns {string} Space-separated emoji class string
|
|
37
|
+
*/
|
|
38
|
+
export function bem(name, modifiers = {}, extra = '') {
|
|
39
|
+
const base = encode(name, _config);
|
|
40
|
+
const classes = [base];
|
|
41
|
+
|
|
42
|
+
for (const [key, active] of Object.entries(modifiers)) {
|
|
43
|
+
if (active) {
|
|
44
|
+
// Build the full modifier class: base + -- + modifier
|
|
45
|
+
const modClass = encode(`${name}--${key}`, _config);
|
|
46
|
+
classes.push(modClass);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (extra) classes.push(extra);
|
|
51
|
+
|
|
52
|
+
return classes.filter(Boolean).join(' ');
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Create a scoped `bem` function bound to a specific block.
|
|
57
|
+
* Useful for component files to avoid repeating the block name.
|
|
58
|
+
*
|
|
59
|
+
* @param {string} blockName e.g. 'card'
|
|
60
|
+
* @returns {Function} bem function scoped to that block
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
* const b = useBem('card');
|
|
64
|
+
* b() // โ '๐'
|
|
65
|
+
* b('image') // โ '๐__๐ผ๏ธ'
|
|
66
|
+
* b('image', { featured}) // โ '๐__๐ผ๏ธ ๐__๐ผ๏ธ--๐'
|
|
67
|
+
*/
|
|
68
|
+
export function useBem(blockName) {
|
|
69
|
+
return function(element, modifiers = {}, extra = '') {
|
|
70
|
+
const name = element ? `${blockName}__${element}` : blockName;
|
|
71
|
+
return bem(name, modifiers, extra);
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export default bem;
|
package/src/resolver.js
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BEMoji Resolver
|
|
3
|
+
*
|
|
4
|
+
* Resolves human-readable BEM strings to emoji class names,
|
|
5
|
+
* and provides utilities for encoding/decoding.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { BLOCKS, ELEMENTS, MODIFIERS, BREAKPOINTS } from './vocabulary.js';
|
|
9
|
+
|
|
10
|
+
const SEP_ELEMENT = '__';
|
|
11
|
+
const SEP_MODIFIER = '--';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Load config, falling back to the default vocabulary.
|
|
15
|
+
* In real usage this would load from bemoji.config.js.
|
|
16
|
+
*/
|
|
17
|
+
export function loadConfig(userConfig = {}) {
|
|
18
|
+
return {
|
|
19
|
+
blocks: { ...BLOCKS, ...userConfig.blocks },
|
|
20
|
+
elements: { ...ELEMENTS, ...userConfig.elements },
|
|
21
|
+
modifiers: { ...MODIFIERS, ...userConfig.modifiers },
|
|
22
|
+
breakpoints: { ...BREAKPOINTS, ...userConfig.breakpoints },
|
|
23
|
+
separator: {
|
|
24
|
+
element: SEP_ELEMENT,
|
|
25
|
+
modifier: SEP_MODIFIER,
|
|
26
|
+
...userConfig.separator,
|
|
27
|
+
},
|
|
28
|
+
compiler: {
|
|
29
|
+
escape: 'auto',
|
|
30
|
+
sourceMap: true,
|
|
31
|
+
purge: true,
|
|
32
|
+
...userConfig.compiler,
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Encode a readable BEM string to emoji.
|
|
39
|
+
*
|
|
40
|
+
* @param {string} readableName e.g. 'card__image--featured'
|
|
41
|
+
* @param {object} config Loaded BEMoji config
|
|
42
|
+
* @returns {string} e.g. '๐__๐ผ๏ธ--๐'
|
|
43
|
+
*/
|
|
44
|
+
export function encode(readableName, config = loadConfig()) {
|
|
45
|
+
const { blocks, elements, modifiers, separator } = config;
|
|
46
|
+
const elSep = separator.element;
|
|
47
|
+
const modSep = separator.modifier;
|
|
48
|
+
|
|
49
|
+
let result = readableName;
|
|
50
|
+
|
|
51
|
+
// Split off modifiers first
|
|
52
|
+
const modSepIdx = result.indexOf(modSep);
|
|
53
|
+
let modifierPart = '';
|
|
54
|
+
if (modSepIdx !== -1) {
|
|
55
|
+
modifierPart = result.slice(modSepIdx + modSep.length);
|
|
56
|
+
result = result.slice(0, modSepIdx);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Split block and element
|
|
60
|
+
const elSepIdx = result.indexOf(elSep);
|
|
61
|
+
let blockPart = result;
|
|
62
|
+
let elementPart = '';
|
|
63
|
+
if (elSepIdx !== -1) {
|
|
64
|
+
blockPart = result.slice(0, elSepIdx);
|
|
65
|
+
elementPart = result.slice(elSepIdx + elSep.length);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Resolve each part
|
|
69
|
+
const blockEmoji = blocks[blockPart] || blockPart;
|
|
70
|
+
const elementEmoji = elements[elementPart] || elementPart;
|
|
71
|
+
const modifierEmoji = modifiers[modifierPart] || modifierPart;
|
|
72
|
+
|
|
73
|
+
// Reassemble
|
|
74
|
+
let encoded = blockEmoji;
|
|
75
|
+
if (elementPart) encoded += elSep + elementEmoji;
|
|
76
|
+
if (modifierPart) encoded += modSep + modifierEmoji;
|
|
77
|
+
|
|
78
|
+
return encoded;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Decode an emoji BEM class name back to readable form.
|
|
83
|
+
*
|
|
84
|
+
* @param {string} emojiClass e.g. '๐__๐ผ๏ธ--๐'
|
|
85
|
+
* @param {object} config Loaded BEMoji config
|
|
86
|
+
* @returns {string} e.g. 'card__image--featured'
|
|
87
|
+
*/
|
|
88
|
+
export function decode(emojiClass, config = loadConfig()) {
|
|
89
|
+
const { blocks, elements, modifiers, separator } = config;
|
|
90
|
+
const elSep = separator.element;
|
|
91
|
+
const modSep = separator.modifier;
|
|
92
|
+
|
|
93
|
+
// Build reverse maps
|
|
94
|
+
const rBlocks = Object.fromEntries(Object.entries(blocks).map(([k,v]) => [v,k]));
|
|
95
|
+
const rElements = Object.fromEntries(Object.entries(elements).map(([k,v]) => [v,k]));
|
|
96
|
+
const rModifiers = Object.fromEntries(Object.entries(modifiers).map(([k,v]) => [v,k]));
|
|
97
|
+
|
|
98
|
+
let result = emojiClass;
|
|
99
|
+
|
|
100
|
+
const modSepIdx = result.indexOf(modSep);
|
|
101
|
+
let modifierPart = '';
|
|
102
|
+
if (modSepIdx !== -1) {
|
|
103
|
+
modifierPart = result.slice(modSepIdx + modSep.length);
|
|
104
|
+
result = result.slice(0, modSepIdx);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
const elSepIdx = result.indexOf(elSep);
|
|
108
|
+
let blockPart = result;
|
|
109
|
+
let elementPart = '';
|
|
110
|
+
if (elSepIdx !== -1) {
|
|
111
|
+
blockPart = result.slice(0, elSepIdx);
|
|
112
|
+
elementPart = result.slice(elSepIdx + elSep.length);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const blockName = rBlocks[blockPart] || blockPart;
|
|
116
|
+
const elementName = rElements[elementPart] || elementPart;
|
|
117
|
+
const modifierName = rModifiers[modifierPart] || modifierPart;
|
|
118
|
+
|
|
119
|
+
let decoded = blockName;
|
|
120
|
+
if (elementPart) decoded += elSep + elementName;
|
|
121
|
+
if (modifierPart) decoded += modSep + modifierName;
|
|
122
|
+
|
|
123
|
+
return decoded;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Escape an emoji string to CSS unicode escape sequences.
|
|
128
|
+
* Required for older browsers / certain CSS parsers.
|
|
129
|
+
*
|
|
130
|
+
* @param {string} emoji
|
|
131
|
+
* @returns {string} e.g. '\01F0CF'
|
|
132
|
+
*/
|
|
133
|
+
export function escapeForCSS(emoji) {
|
|
134
|
+
return [...emoji]
|
|
135
|
+
.map(char => {
|
|
136
|
+
const cp = char.codePointAt(0);
|
|
137
|
+
if (cp > 0x7E) {
|
|
138
|
+
return '\\' + cp.toString(16).toUpperCase().padStart(6, '0');
|
|
139
|
+
}
|
|
140
|
+
return char;
|
|
141
|
+
})
|
|
142
|
+
.join('');
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Generate a full CSS selector from a readable BEM name.
|
|
147
|
+
*
|
|
148
|
+
* @param {string} readableName
|
|
149
|
+
* @param {object} config
|
|
150
|
+
* @param {boolean} escaped Whether to output unicode escapes
|
|
151
|
+
* @returns {string} CSS selector string e.g. '.๐__๐ผ๏ธ--๐'
|
|
152
|
+
*/
|
|
153
|
+
export function toSelector(readableName, config = loadConfig(), escaped = false) {
|
|
154
|
+
const emoji = encode(readableName, config);
|
|
155
|
+
return escaped ? '.' + escapeForCSS(emoji) : '.' + emoji;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
export default { encode, decode, escapeForCSS, toSelector, loadConfig };
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BEMoji Canonical Vocabulary
|
|
3
|
+
* The official 143-token emoji lexicon.
|
|
4
|
+
*
|
|
5
|
+
* This file is the single source of truth for all reserved emoji tokens.
|
|
6
|
+
* Custom tokens are defined in bemoji.config.js and must not collide with these.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export const BLOCKS = {
|
|
10
|
+
card: '๐',
|
|
11
|
+
navbar: '๐งญ',
|
|
12
|
+
footer: '๐ฆถ',
|
|
13
|
+
form: '๐',
|
|
14
|
+
modal: '๐ช',
|
|
15
|
+
alert: '๐',
|
|
16
|
+
badge: '๐ท๏ธ',
|
|
17
|
+
tooltip: '๐ฌ',
|
|
18
|
+
table: '๐',
|
|
19
|
+
tabs: '๐',
|
|
20
|
+
carousel: '๐ ',
|
|
21
|
+
breadcrumb: '๐',
|
|
22
|
+
drawer: '๐๏ธ',
|
|
23
|
+
accordion: '๐',
|
|
24
|
+
avatar: '๐ค',
|
|
25
|
+
progress: '๐ถ',
|
|
26
|
+
skeleton: '๐',
|
|
27
|
+
pagination: '๐',
|
|
28
|
+
dropdown: '๐ฅ',
|
|
29
|
+
stepper: '๐ช',
|
|
30
|
+
timeline: '๐
',
|
|
31
|
+
sidebar: '๐',
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export const ELEMENTS = {
|
|
35
|
+
image: '๐ผ๏ธ',
|
|
36
|
+
title: '๐ ',
|
|
37
|
+
body: '๐',
|
|
38
|
+
footer: '๐ฆถ',
|
|
39
|
+
header: '๐ช',
|
|
40
|
+
button: '๐',
|
|
41
|
+
input: '๐ฅ',
|
|
42
|
+
link: '๐',
|
|
43
|
+
label: '๐ท๏ธ',
|
|
44
|
+
icon: '๐ญ',
|
|
45
|
+
item: '๐',
|
|
46
|
+
divider: '๐๏ธ',
|
|
47
|
+
prefix: '๐ญ',
|
|
48
|
+
suffix: '๐ฌ',
|
|
49
|
+
overlay: '๐ซ๏ธ',
|
|
50
|
+
close: 'โ๏ธ',
|
|
51
|
+
badge: '๐ข',
|
|
52
|
+
avatar: '๐ง',
|
|
53
|
+
count: '๐ข',
|
|
54
|
+
description: '๐',
|
|
55
|
+
actions: 'โก',
|
|
56
|
+
empty: '๐ณ๏ธ',
|
|
57
|
+
error: '๐จ',
|
|
58
|
+
hint: '๐ก',
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export const MODIFIERS = {
|
|
62
|
+
// Semantic states
|
|
63
|
+
primary: '๐',
|
|
64
|
+
secondary: '๐ฅ',
|
|
65
|
+
danger: '๐ด',
|
|
66
|
+
success: '๐ข',
|
|
67
|
+
warning: '๐ก',
|
|
68
|
+
info: '๐ต',
|
|
69
|
+
neutral: 'โฌ',
|
|
70
|
+
|
|
71
|
+
// Interactive states
|
|
72
|
+
disabled: '๐ป',
|
|
73
|
+
active: 'โ
',
|
|
74
|
+
loading: 'โณ',
|
|
75
|
+
locked: '๐',
|
|
76
|
+
hidden: '๐',
|
|
77
|
+
visible: '๐๏ธ',
|
|
78
|
+
selected: 'โ๏ธ',
|
|
79
|
+
focused: '๐',
|
|
80
|
+
hovered: '๐',
|
|
81
|
+
pressed: '๐',
|
|
82
|
+
error: '๐จ',
|
|
83
|
+
valid: 'โ๏ธ',
|
|
84
|
+
invalid: 'โ',
|
|
85
|
+
|
|
86
|
+
// Visual variants
|
|
87
|
+
dark: '๐ถ๏ธ',
|
|
88
|
+
light: 'โ๏ธ',
|
|
89
|
+
ghost: '๐๏ธ',
|
|
90
|
+
outline: 'โฌ',
|
|
91
|
+
filled: 'โ ',
|
|
92
|
+
flat: 'โฌ',
|
|
93
|
+
elevated: 'โ๏ธ',
|
|
94
|
+
rounded: 'โญ',
|
|
95
|
+
pill: '๐',
|
|
96
|
+
square: '๐ฅ',
|
|
97
|
+
|
|
98
|
+
// Content flags
|
|
99
|
+
premium: '๐',
|
|
100
|
+
new: '๐',
|
|
101
|
+
hot: '๐ฅ',
|
|
102
|
+
beta: '๐งช',
|
|
103
|
+
deprecated: 'โ ๏ธ',
|
|
104
|
+
required: 'โ',
|
|
105
|
+
optional: 'โ',
|
|
106
|
+
|
|
107
|
+
// Size modifiers
|
|
108
|
+
xs: '๐ฌ',
|
|
109
|
+
sm: '๐ค',
|
|
110
|
+
md: 'โ๏ธ',
|
|
111
|
+
lg: '๐๏ธ',
|
|
112
|
+
xl: '๐๏ธ',
|
|
113
|
+
'2xl': '๐',
|
|
114
|
+
full: '๐ฆ',
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
export const BREAKPOINTS = {
|
|
118
|
+
sm: { prefix: '๐', minWidth: '640px' },
|
|
119
|
+
md: { prefix: '๐ฒ', minWidth: '768px' },
|
|
120
|
+
lg: { prefix: '๐ป', minWidth: '1024px' },
|
|
121
|
+
xl: { prefix: '๐ฅ๏ธ', minWidth: '1280px' },
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
export const UTILITIES = {
|
|
125
|
+
// Display
|
|
126
|
+
block: '๐ฆ',
|
|
127
|
+
inline: 'โถ๏ธ',
|
|
128
|
+
flex: '๐',
|
|
129
|
+
grid: '๐',
|
|
130
|
+
hidden: '๐',
|
|
131
|
+
contents: '๐',
|
|
132
|
+
|
|
133
|
+
// Flex/Grid children
|
|
134
|
+
'col-1': '๐ ',
|
|
135
|
+
'col-2': '๐ฒ',
|
|
136
|
+
'col-3': '๐ณ',
|
|
137
|
+
'col-4': 'โฌ',
|
|
138
|
+
'col-auto': '๐',
|
|
139
|
+
'col-span-2': '๐๏ธ',
|
|
140
|
+
'col-span-3': '๐๏ธ',
|
|
141
|
+
'col-span-full': '๐',
|
|
142
|
+
|
|
143
|
+
// Spacing (pattern: emoji + scale)
|
|
144
|
+
// p-{n}: ๐ prefix, m-{n}: ๐ prefix
|
|
145
|
+
// Gap
|
|
146
|
+
'gap-1': 'โ๏ธ1',
|
|
147
|
+
'gap-2': 'โ๏ธ2',
|
|
148
|
+
'gap-4': 'โ๏ธ4',
|
|
149
|
+
'gap-8': 'โ๏ธ8',
|
|
150
|
+
|
|
151
|
+
// Text align
|
|
152
|
+
'text-left': 'โฌ
๏ธ',
|
|
153
|
+
'text-center': 'โ๏ธ',
|
|
154
|
+
'text-right': 'โก๏ธ',
|
|
155
|
+
|
|
156
|
+
// Font weight
|
|
157
|
+
'font-light': '๐ชถ',
|
|
158
|
+
'font-normal': 'โ๏ธ',
|
|
159
|
+
'font-bold': '๐๏ธ',
|
|
160
|
+
'font-black': '๐๏ธ',
|
|
161
|
+
|
|
162
|
+
// Overflow
|
|
163
|
+
'overflow-hidden': 'โ๏ธ',
|
|
164
|
+
'overflow-auto': 'โ๏ธ',
|
|
165
|
+
'overflow-scroll': '๐',
|
|
166
|
+
|
|
167
|
+
// Position
|
|
168
|
+
relative: '๐',
|
|
169
|
+
absolute: '๐',
|
|
170
|
+
fixed: '๐',
|
|
171
|
+
sticky: '๐ฉน',
|
|
172
|
+
|
|
173
|
+
// Width / Height
|
|
174
|
+
'w-full': '๐',
|
|
175
|
+
'h-full': '๐๏ธ',
|
|
176
|
+
'w-screen': '๐ฅ๏ธ',
|
|
177
|
+
'h-screen': '๐บ',
|
|
178
|
+
|
|
179
|
+
// Visibility
|
|
180
|
+
invisible: '๐ป',
|
|
181
|
+
'sr-only': '๐',
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
// Build reverse lookup maps (emoji โ name)
|
|
185
|
+
export const REVERSE_BLOCKS = Object.fromEntries(Object.entries(BLOCKS).map(([k,v]) => [v,k]));
|
|
186
|
+
export const REVERSE_ELEMENTS = Object.fromEntries(Object.entries(ELEMENTS).map(([k,v]) => [v,k]));
|
|
187
|
+
export const REVERSE_MODIFIERS = Object.fromEntries(Object.entries(MODIFIERS).map(([k,v]) => [v,k]));
|
|
188
|
+
|
|
189
|
+
export default { BLOCKS, ELEMENTS, MODIFIERS, BREAKPOINTS, UTILITIES };
|