oneslash-design-system 1.1.10 → 1.1.12

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.
Files changed (48) hide show
  1. package/components/button.tsx +3 -23
  2. package/components/iconButton.tsx +2 -2
  3. package/components/menuItem.tsx +0 -1
  4. package/components/modal.tsx +14 -17
  5. package/components/popover.tsx +1 -5
  6. package/components/tab.tsx +2 -2
  7. package/components/tag.tsx +0 -2
  8. package/dist/components/alert.d.ts +9 -0
  9. package/dist/components/alert.jsx +38 -0
  10. package/dist/components/button.d.ts +13 -0
  11. package/dist/components/button.jsx +141 -0
  12. package/dist/components/checkBox.d.ts +7 -0
  13. package/dist/components/checkBox.jsx +29 -0
  14. package/dist/components/emptyBox.d.ts +7 -0
  15. package/dist/components/emptyBox.jsx +17 -0
  16. package/dist/components/iconButton.d.ts +11 -0
  17. package/dist/components/iconButton.jsx +126 -0
  18. package/dist/components/loadingScreen.d.ts +3 -0
  19. package/dist/components/loadingScreen.jsx +14 -0
  20. package/dist/components/menuItem.d.ts +12 -0
  21. package/dist/components/menuItem.jsx +100 -0
  22. package/dist/components/modal.d.ts +11 -0
  23. package/dist/components/modal.jsx +47 -0
  24. package/dist/components/popover.d.ts +10 -0
  25. package/dist/components/popover.jsx +52 -0
  26. package/dist/components/radioGroup.d.ts +13 -0
  27. package/dist/components/radioGroup.jsx +17 -0
  28. package/dist/components/tab.d.ts +12 -0
  29. package/dist/components/tab.jsx +113 -0
  30. package/dist/components/tag.d.ts +14 -0
  31. package/dist/components/tag.jsx +123 -0
  32. package/dist/components/textField.d.ts +20 -0
  33. package/dist/components/textField.jsx +55 -0
  34. package/dist/components/timeStamp.d.ts +7 -0
  35. package/dist/components/timeStamp.jsx +58 -0
  36. package/dist/components/tooltip.d.ts +7 -0
  37. package/dist/components/tooltip.jsx +41 -0
  38. package/dist/components/userImage.d.ts +7 -0
  39. package/dist/components/userImage.jsx +13 -0
  40. package/dist/designTokens.d.ts +354 -0
  41. package/dist/designTokens.js +232 -0
  42. package/dist/index.d.ts +17 -0
  43. package/dist/index.js +17 -0
  44. package/dist/output.css +1185 -0
  45. package/dist/tailwind.config.d.ts +3 -0
  46. package/dist/tailwind.config.js +202 -0
  47. package/package.json +1 -1
  48. package/{tailwind.config.js → tailwind.config.ts} +7 -99
package/dist/designTokens.js ADDED
@@ -0,0 +1,232 @@
1
+ "use strict";
2
+ // design tokens definitions
3
+ module.exports = {
4
+ colors: {
5
+ // light
6
+ light: {
7
+ text: {
8
+ primary: '#000000',
9
+ secondary: '#6D6D6D',
10
+ disabled: '#9E9E9E',
11
+ contrast: '#ffffff',
12
+ },
13
+ accent: {
14
+ main: '#EEAE03',
15
+ dark: '#CE8602',
16
+ light: '#FFDD43',
17
+ contrast: '#000000',
18
+ },
19
+ primary: {
20
+ main: '#454545',
21
+ dark: '#262626',
22
+ light: '#888888',
23
+ },
24
+ secondary: {
25
+ main: '#B0B0B0',
26
+ dark: '#888888',
27
+ light: '#D1D1D1',
28
+ },
29
+ error: {
30
+ main: '#D32F2F',
31
+ dark: '#B22323',
32
+ light: '#F27777',
33
+ },
34
+ warning: {
35
+ main: '#EF6C00',
36
+ dark: '#CC5302',
37
+ light: '#FFA732',
38
+ },
39
+ info: {
40
+ main: '#0087D4',
41
+ dark: '#006BAB',
42
+ light: '#2CC1FF',
43
+ },
44
+ success: {
45
+ main: '#328736',
46
+ dark: '#2A6B2D',
47
+ light: '#67C16B',
48
+ },
49
+ background: {
50
+ default: '#FFFFFF',
51
+ accent100: '#F6F6F6',
52
+ accent200: '#E7E7E7',
53
+ accent300: '#D1D1D1',
54
+ },
55
+ action: {
56
+ active: '#888888',
57
+ hover: '#F3F3F3',
58
+ selected: '#E3E3E3',
59
+ disabledBackground: '#D1D1D1',
60
+ disabled: '#B0B0B0',
61
+ },
62
+ actionBackground: {
63
+ enabled: '#FFFFFF',
64
+ hovered: '#FFFFFF',
65
+ selected: '#FFFFFF',
66
+ disabled: '#EEEEEE',
67
+ },
68
+ actionOutlinedBorder: {
69
+ enabled: '#888888',
70
+ hovered: '#CDCDCD',
71
+ selected: '#E8E8E8',
72
+ disabled: '#B0B0B0',
73
+ },
74
+ misc: {
75
+ divider: '#D1D1D1',
76
+ },
77
+ },
78
+ // dark
79
+ dark: {
80
+ text: {
81
+ primary: '#FFFFFF',
82
+ secondary: '#B0B0B0',
83
+ disabled: '#6D6D6D',
84
+ contrast: '#000000',
85
+ },
86
+ accent: {
87
+ main: '#FFCD29',
88
+ dark: '#CE8602',
89
+ light: '#FFDD43',
90
+ contrast: '#000000',
91
+ },
92
+ primary: {
93
+ main: '#D5D5D5',
94
+ dark: '#E9E9E9',
95
+ light: '#9A9A9A',
96
+ },
97
+ secondary: {
98
+ main: '#4F4F4F',
99
+ dark: '#454545',
100
+ light: '#6D6D6D',
101
+ },
102
+ error: {
103
+ main: '#E74C4C',
104
+ dark: '#B22323',
105
+ light: '#F27777',
106
+ },
107
+ warning: {
108
+ main: '#FF8C0A',
109
+ dark: '#CC5302',
110
+ light: '#FFA732',
111
+ },
112
+ info: {
113
+ main: '#00AFFF',
114
+ dark: '#006BAB',
115
+ light: '#2CC1FF',
116
+ },
117
+ success: {
118
+ main: '#42A547',
119
+ dark: '#2A6B2D',
120
+ light: '#67C16B',
121
+ },
122
+ background: {
123
+ default: '#262626',
124
+ accent100: '#333333',
125
+ accent200: '#454545',
126
+ accent300: '#4F4F4F',
127
+ },
128
+ action: {
129
+ active: '#171717',
130
+ hover: '#3D3D3D',
131
+ selected: '#4E4E4E',
132
+ disabledBackground: '#3C3C3C',
133
+ disabled: '#383838',
134
+ },
135
+ actionBackground: {
136
+ enabled: '#FFFFFF',
137
+ hovered: '#FFFFFF',
138
+ selected: '#FFFFFF',
139
+ disabled: '#383838',
140
+ },
141
+ actionOutlinedBorder: {
142
+ enabled: '#7B7B7B',
143
+ hovered: '#2F2F2F',
144
+ selected: '#404040',
145
+ disabled: '#383838',
146
+ },
147
+ misc: {
148
+ divider: '#404040',
149
+ },
150
+ },
151
+ },
152
+ spacing: {
153
+ small: '4px',
154
+ medium: '8px',
155
+ large: '16px',
156
+ },
157
+ typography: {
158
+ family: 'Inter, sans-serif',
159
+ h1: {
160
+ weight: '300',
161
+ size: '96px',
162
+ lineHeight: '120%',
163
+ letterSpacing: '-1.5px',
164
+ },
165
+ h2: {
166
+ weight: '300',
167
+ size: '60px',
168
+ lineHeight: '120%',
169
+ letterSpacing: '-0.5px',
170
+ },
171
+ h3: {
172
+ weight: '400',
173
+ size: '48px',
174
+ lineHeight: '120%',
175
+ letterSpacing: '0px',
176
+ },
177
+ h4: {
178
+ weight: '400',
179
+ size: '34px',
180
+ lineHeight: '120%',
181
+ letterSpacing: '0.3px',
182
+ },
183
+ h5: {
184
+ weight: '400',
185
+ size: '24px',
186
+ lineHeight: '120%',
187
+ letterSpacing: '0px',
188
+ },
189
+ h6: {
190
+ weight: '500',
191
+ size: '20px',
192
+ lineHeight: '150%',
193
+ letterSpacing: '0.2px',
194
+ },
195
+ subtitle1: {
196
+ weight: '500',
197
+ size: '16px',
198
+ lineHeight: '150%',
199
+ letterSpacing: '0.2px',
200
+ },
201
+ subtitle2: {
202
+ weight: '500',
203
+ size: '14px',
204
+ lineHeight: '150%',
205
+ letterSpacing: '0.1px',
206
+ },
207
+ body1: {
208
+ weight: '400',
209
+ size: '16px',
210
+ lineHeight: '150%',
211
+ letterSpacing: '0.2px',
212
+ },
213
+ body2: {
214
+ weight: '400',
215
+ size: '14px',
216
+ lineHeight: '150%',
217
+ letterSpacing: '0.2px',
218
+ },
219
+ caption: {
220
+ weight: '400',
221
+ size: '12px',
222
+ lineHeight: '150%',
223
+ letterSpacing: '1.2px',
224
+ },
225
+ alignments: {
226
+ left: 'left',
227
+ center: 'center',
228
+ right: 'right',
229
+ justify: 'justify',
230
+ },
231
+ },
232
+ };
package/dist/index.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import './index.css';
2
+ import './designTokens';
3
+ export * from './components/alert';
4
+ export * from './components/button';
5
+ export * from './components/checkBox';
6
+ export * from './components/emptyBox';
7
+ export * from './components/iconButton';
8
+ export * from './components/loadingScreen';
9
+ export * from './components/menuItem';
10
+ export * from './components/modal';
11
+ export * from './components/popover';
12
+ export * from './components/tab';
13
+ export * from './components/tag';
14
+ export * from './components/textField';
15
+ export * from './components/timeStamp';
16
+ export * from './components/tooltip';
17
+ export * from './components/userImage';
package/dist/index.js ADDED
@@ -0,0 +1,17 @@
1
+ import './index.css';
2
+ import './designTokens';
3
+ export * from './components/alert';
4
+ export * from './components/button';
5
+ export * from './components/checkBox';
6
+ export * from './components/emptyBox';
7
+ export * from './components/iconButton';
8
+ export * from './components/loadingScreen';
9
+ export * from './components/menuItem';
10
+ export * from './components/modal';
11
+ export * from './components/popover';
12
+ export * from './components/tab';
13
+ export * from './components/tag';
14
+ export * from './components/textField';
15
+ export * from './components/timeStamp';
16
+ export * from './components/tooltip';
17
+ export * from './components/userImage';