@repobit/dex-system-design 0.14.0 → 0.15.0
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/CHANGELOG.md +10 -0
- package/package.json +2 -2
- package/src/tokens/fonts.css +166 -0
- package/src/tokens/tokens.css +875 -224
- package/src/tokens/tokens.js +280 -0
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
|
|
3
|
+
export const tokens = css`
|
|
4
|
+
:host {
|
|
5
|
+
/* =====================
|
|
6
|
+
COLORS
|
|
7
|
+
====================== */
|
|
8
|
+
--color-blue-50: #F0F7FF;
|
|
9
|
+
--color-blue-100: #D6E8FF;
|
|
10
|
+
--color-blue-200: #9EC8FF;
|
|
11
|
+
--color-blue-300: #6BABFF;
|
|
12
|
+
--color-blue-400: #338BFF;
|
|
13
|
+
--color-blue-500: #006dff;
|
|
14
|
+
--color-blue-600: #0059D6;
|
|
15
|
+
--color-blue-700: #0045AD;
|
|
16
|
+
--color-blue-800: #003385;
|
|
17
|
+
--color-blue-900: #00225C;
|
|
18
|
+
--color-blue-950: #001947;
|
|
19
|
+
|
|
20
|
+
--color-red-50: #FFF0F0;
|
|
21
|
+
--color-red-100: #FFD6D6;
|
|
22
|
+
--color-red-200: #FF9E9E;
|
|
23
|
+
--color-red-300: #FF6B6B;
|
|
24
|
+
--color-red-400: #FF3333;
|
|
25
|
+
--color-red-500: #FF0000;
|
|
26
|
+
--color-red-600: #D60000;
|
|
27
|
+
--color-red-700: #AD0000;
|
|
28
|
+
--color-red-800: #850000;
|
|
29
|
+
--color-red-900: #5C0000;
|
|
30
|
+
--color-red-950: #470000;
|
|
31
|
+
|
|
32
|
+
--color-green-50: #EDFDF1;
|
|
33
|
+
--color-green-100: #D1FADC;
|
|
34
|
+
--color-green-200: #9AF4B4;
|
|
35
|
+
--color-green-300: #63EE8D;
|
|
36
|
+
--color-green-400: #2CE767;
|
|
37
|
+
--color-green-500: #15C14F;
|
|
38
|
+
--color-green-600: #12A641;
|
|
39
|
+
--color-green-700: #0E8532;
|
|
40
|
+
--color-green-800: #0B6A26;
|
|
41
|
+
--color-green-900: #084A1A;
|
|
42
|
+
--color-green-950: #063C14;
|
|
43
|
+
|
|
44
|
+
--color-yellow-50: #FFFBF0;
|
|
45
|
+
--color-yellow-100: #FFF5D6;
|
|
46
|
+
--color-yellow-200: #FFE89E;
|
|
47
|
+
--color-yellow-300: #FFDC6B;
|
|
48
|
+
--color-yellow-400: #FFCF33;
|
|
49
|
+
--color-yellow-500: #FFC400;
|
|
50
|
+
--color-yellow-600: #D6A000;
|
|
51
|
+
--color-yellow-700: #AD7F00;
|
|
52
|
+
--color-yellow-800: #855F00;
|
|
53
|
+
--color-yellow-900: #5C4000;
|
|
54
|
+
--color-yellow-950: #473100;
|
|
55
|
+
|
|
56
|
+
--color-neutral-0: #FFFFFF;
|
|
57
|
+
--color-neutral-25: #FAFAFA;
|
|
58
|
+
--color-neutral-50: #f1f2f3;
|
|
59
|
+
--color-neutral-100: #e1e3e5;
|
|
60
|
+
--color-neutral-200: #c5c9ce;
|
|
61
|
+
--color-neutral-300: #a6adb4;
|
|
62
|
+
--color-neutral-400: #88909b;
|
|
63
|
+
--color-neutral-500: #6c7580;
|
|
64
|
+
--color-neutral-600: #565e66;
|
|
65
|
+
--color-neutral-700: #41474d;
|
|
66
|
+
--color-neutral-800: #2c3035;
|
|
67
|
+
--color-neutral-900: #151719;
|
|
68
|
+
--color-neutral-950: #0c0d0e;
|
|
69
|
+
--color-neutral-1000: #000000;
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
/* =====================
|
|
73
|
+
DISPLAY FONT SIZES
|
|
74
|
+
====================== */
|
|
75
|
+
|
|
76
|
+
/* Display default */
|
|
77
|
+
--display-xxsmall: 44px; /* 58.652px = 3.666rem */
|
|
78
|
+
--display-xsmall: 48px; /* 63.984px = 3.999rem */
|
|
79
|
+
--display-small: 52px; /* 69.316px = 4.332rem */
|
|
80
|
+
--display-medium: 56px; /* 74.648px = 4.666rem */
|
|
81
|
+
--display-large: 60px; /* 79.98px = 5rem */
|
|
82
|
+
--display-xlarge: 64px; /* 85.312px = 5.333rem */
|
|
83
|
+
|
|
84
|
+
/* Display mobile */
|
|
85
|
+
--display-xxsmall-mobile: 34px; /* 45.322px = 2.833rem */
|
|
86
|
+
--display-xsmall-mobile: 36px; /* 47.988px = 2.999rem */
|
|
87
|
+
--display-small-mobile: 38px; /* 50.654px = 3.167rem */
|
|
88
|
+
--display-medium-mobile: 40px; /* 53.32px = 3.333rem */
|
|
89
|
+
--display-large-mobile: 44px; /* 58.652px = 3.666rem */
|
|
90
|
+
--display-xlarge-mobile: 48px; /* 63.984px = 3.999rem */
|
|
91
|
+
|
|
92
|
+
/* Heading default */
|
|
93
|
+
--heading-xxsmall: 18px; /* 23.994px = 1.5rem */
|
|
94
|
+
--heading-xsmall: 20px; /* 26.66px = 1.667rem */
|
|
95
|
+
--heading-small: 24px; /* 31.992px = 2rem */
|
|
96
|
+
--heading-medium: 28px; /* 37.324px = 2.333rem */
|
|
97
|
+
--heading-large: 32px; /* 42.656px = 2.667rem */
|
|
98
|
+
--heading-xlarge: 36px; /* 47.988px = 2.999rem */
|
|
99
|
+
--heading-xxlarge: 40px; /* 53.32px = 3.333rem */
|
|
100
|
+
|
|
101
|
+
/* Body default */
|
|
102
|
+
--body-small: 13px; /* 17.329px = 1.083rem */
|
|
103
|
+
--body-medium: 14px; /* 18.662px = 1.167rem */
|
|
104
|
+
--body-large: 16px; /* 21.328px = 1.333rem */
|
|
105
|
+
--body-xlarge: 18px; /* 23.994px = 1.5rem */
|
|
106
|
+
|
|
107
|
+
/* Caption default */
|
|
108
|
+
--caption-small: 11px; /* 14.663px = 0.917rem */
|
|
109
|
+
--caption-large: 12px; /* 15.996px = 1rem */
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
/* Display Default */
|
|
115
|
+
--display-xlarge-line-height: 1.1; /* For 60px */
|
|
116
|
+
--display-medium-line-height: 1.15; /* For 52px */
|
|
117
|
+
|
|
118
|
+
/* Display Mobile */
|
|
119
|
+
--display-xlarge-mobile-line-height: 1.15; /* For 44px */
|
|
120
|
+
--display-medium-mobile-line-height: 1.2; /* For 38px */
|
|
121
|
+
|
|
122
|
+
/* Heading */
|
|
123
|
+
--heading-xlarge-line-height: 1.2; /* For 36px */
|
|
124
|
+
--heading-small-line-height: 1.3; /* For 24px */
|
|
125
|
+
|
|
126
|
+
/* Body */
|
|
127
|
+
--body-large-line-height: 1.5; /* For 16px */
|
|
128
|
+
|
|
129
|
+
/* Caption */
|
|
130
|
+
--caption-large-line-height: 1.35; /* For 12px */
|
|
131
|
+
/* =====================
|
|
132
|
+
PADDING SIZES
|
|
133
|
+
====================== */
|
|
134
|
+
|
|
135
|
+
/* PADDING VALUES */
|
|
136
|
+
--size-0: 0;
|
|
137
|
+
--size-1: 1px;
|
|
138
|
+
--size-2: 2px;
|
|
139
|
+
--size-4: 4px;
|
|
140
|
+
--size-6: 6px;
|
|
141
|
+
--size-8: 8px;
|
|
142
|
+
--size-10: 10px;
|
|
143
|
+
--size-12: 12px;
|
|
144
|
+
--size-14: 14px;
|
|
145
|
+
--size-16: 16px;
|
|
146
|
+
--size-18: 18px;
|
|
147
|
+
--size-20: 20px;
|
|
148
|
+
--size-22: 22px;
|
|
149
|
+
--size-24: 24px;
|
|
150
|
+
--size-32: 32px;
|
|
151
|
+
--size-36: 36px;
|
|
152
|
+
--size-40: 40px;
|
|
153
|
+
--size-44: 44px;
|
|
154
|
+
--size-52: 52px;
|
|
155
|
+
--size-64: 64px;
|
|
156
|
+
--size-full: 99999999999999999999;
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
/* Spacing Tokens
|
|
160
|
+
-----------------------------------------------*/
|
|
161
|
+
/* Base spacing tokens - Based on 4px grid */
|
|
162
|
+
--space-none: 0;
|
|
163
|
+
--space-4xs: 0.125rem; /* 2px */
|
|
164
|
+
--space-3xs: 0.25rem; /* 4px */
|
|
165
|
+
--space-2xs: 0.5rem; /* 8px */
|
|
166
|
+
--space-xs: 0.75rem; /* 12px */
|
|
167
|
+
--space-sm: 1rem; /* 16px */
|
|
168
|
+
--space-md: 1.5rem; /* 24px */
|
|
169
|
+
--space-lg: 2rem; /* 32px */
|
|
170
|
+
--space-xl: 2.5rem; /* 40px */
|
|
171
|
+
--space-2xl: 3rem; /* 48px */
|
|
172
|
+
--space-3xl: 4rem; /* 64px */
|
|
173
|
+
--space-4xl: 6rem; /* 96px */
|
|
174
|
+
--space-5xl: 8rem; /* 128px */
|
|
175
|
+
|
|
176
|
+
/* Semantic Padding Tokens */
|
|
177
|
+
--padding-button: var(--space-xs) var(--space-md);
|
|
178
|
+
--padding-input: var(--space-xs);
|
|
179
|
+
--padding-card: var(--space-md);
|
|
180
|
+
--padding-card-sm: var(--space-sm);
|
|
181
|
+
--padding-card-lg: var(--space-lg);
|
|
182
|
+
|
|
183
|
+
--padding-section: var(--space-3xl) 0;
|
|
184
|
+
--padding-section-sm: var(--space-2xl) 0;
|
|
185
|
+
--padding-section-lg: var(--space-4xl) 0;
|
|
186
|
+
|
|
187
|
+
/* Container and Layout Tokens */
|
|
188
|
+
--container-padding: var(--space-md);
|
|
189
|
+
--container-padding-sm: var(--space-sm);
|
|
190
|
+
--container-padding-lg: var(--space-lg);
|
|
191
|
+
|
|
192
|
+
/* Inset (Padding All Sides) Tokens */
|
|
193
|
+
--inset-xs: var(--space-xs);
|
|
194
|
+
--inset-sm: var(--space-sm);
|
|
195
|
+
--inset-md: var(--space-md);
|
|
196
|
+
--inset-lg: var(--space-lg);
|
|
197
|
+
|
|
198
|
+
/* Stack (Vertical Spacing) Tokens */
|
|
199
|
+
--stack-xs: var(--space-xs);
|
|
200
|
+
--stack-sm: var(--space-sm);
|
|
201
|
+
--stack-md: var(--space-md);
|
|
202
|
+
--stack-lg: var(--space-lg);
|
|
203
|
+
--stack-xl: var(--space-xl);
|
|
204
|
+
|
|
205
|
+
/* Inline (Horizontal Spacing) Tokens */
|
|
206
|
+
--inline-xs: var(--space-xs);
|
|
207
|
+
--inline-sm: var(--space-sm);
|
|
208
|
+
--inline-md: var(--space-md);
|
|
209
|
+
--inline-lg: var(--space-lg);
|
|
210
|
+
|
|
211
|
+
/* Accessibility Spacing Tokens
|
|
212
|
+
-----------------------------------------------*/
|
|
213
|
+
/* Touch Target Sizes - WCAG 2.1 Success Criterion 2.5.5 (AAA) and 2.5.8 (AA) */
|
|
214
|
+
--touch-target-size: 44px; /* Minimum touch target size (44px × 44px) */
|
|
215
|
+
--touch-target-spacing: 8px; /* Minimum space between touch targets */
|
|
216
|
+
|
|
217
|
+
/* Readable Line Lengths - For optimal readability */
|
|
218
|
+
--content-width-readable: 70ch; /* Approximately 70 characters per line */
|
|
219
|
+
--content-width-max: 1200px; /* Maximum overall content width */
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
/** GRID TOKENS
|
|
223
|
+
*/
|
|
224
|
+
/* Grid container max widths */
|
|
225
|
+
--grid-container-max-xs: 100%; /* mobile full width */
|
|
226
|
+
--grid-container-max-sm: 540px;
|
|
227
|
+
--grid-container-max-md: 720px;
|
|
228
|
+
--grid-container-max-lg: 960px;
|
|
229
|
+
--grid-container-max-xl: 1140px;
|
|
230
|
+
--grid-container-max-xxl: 1320px;
|
|
231
|
+
|
|
232
|
+
/* Column count (usually 12) */
|
|
233
|
+
--grid-columns: 12;
|
|
234
|
+
|
|
235
|
+
/* Gutter spacing between columns */
|
|
236
|
+
--grid-gutter-xs: 16px;
|
|
237
|
+
--grid-gutter-sm: 24px;
|
|
238
|
+
--grid-gutter-md: 32px;
|
|
239
|
+
--grid-gutter-lg: 40px;
|
|
240
|
+
|
|
241
|
+
/* Container padding (horizontal spacing) */
|
|
242
|
+
--grid-padding-xs: 16px;
|
|
243
|
+
--grid-padding-sm: 24px;
|
|
244
|
+
--grid-padding-md: 32px;
|
|
245
|
+
--grid-padding-lg: 40px;
|
|
246
|
+
|
|
247
|
+
/* Breakpoints */
|
|
248
|
+
--breakpoint-xs: 0px;
|
|
249
|
+
--breakpoint-sm: 576px;
|
|
250
|
+
--breakpoint-md: 768px;
|
|
251
|
+
--breakpoint-lg: 992px;
|
|
252
|
+
--breakpoint-xl: 1200px;
|
|
253
|
+
--breakpoint-xxl: 1400px;
|
|
254
|
+
|
|
255
|
+
/* =====================
|
|
256
|
+
FONT TOKENS
|
|
257
|
+
====================== */
|
|
258
|
+
/* IBM Plex Mono */
|
|
259
|
+
--font-family-mono: 'IBM Plex Mono', monospace;
|
|
260
|
+
--font-weight-mono-light: 300;
|
|
261
|
+
--font-weight-mono-regular: 400;
|
|
262
|
+
--font-weight-mono-medium: 500;
|
|
263
|
+
--font-weight-mono-semibold: 600;
|
|
264
|
+
--font-weight-mono-bold: 700;
|
|
265
|
+
|
|
266
|
+
--font-style-mono-normal: normal;
|
|
267
|
+
--font-style-mono-italic: italic;
|
|
268
|
+
|
|
269
|
+
/* IBMPlexSans */
|
|
270
|
+
--font-family-sans: 'IBM Plex Sans', sans-serif;
|
|
271
|
+
--font-weight-sans-light: 300;
|
|
272
|
+
--font-weight-sans-regular: 400;
|
|
273
|
+
--font-weight-sans-medium: 500;
|
|
274
|
+
--font-weight-sans-semibold: 600;
|
|
275
|
+
--font-weight-sans-bold: 700;
|
|
276
|
+
|
|
277
|
+
--font-style-sans-normal: normal;
|
|
278
|
+
--font-style-sans-italic: italic;
|
|
279
|
+
}
|
|
280
|
+
`;
|