oneslash-design-system 1.2.15 → 1.2.17

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 (41) hide show
  1. package/dist/components/alert.jsx +1 -1
  2. package/dist/components/loadingScreen.jsx +2 -2
  3. package/dist/components/menuItem.jsx +1 -1
  4. package/dist/output.css +29 -5
  5. package/dist/tsconfig.tsbuildinfo +1 -0
  6. package/package.json +28 -4
  7. package/.claude/settings.local.json +0 -9
  8. package/.eslintrc.json +0 -3
  9. package/components/alert.tsx +0 -132
  10. package/components/button.tsx +0 -120
  11. package/components/checkBox.tsx +0 -60
  12. package/components/emptyBox.tsx +0 -33
  13. package/components/iconButton.tsx +0 -103
  14. package/components/loadingScreen.tsx +0 -30
  15. package/components/menu.tsx +0 -35
  16. package/components/menuItem.tsx +0 -117
  17. package/components/modal.tsx +0 -85
  18. package/components/navigation.tsx +0 -27
  19. package/components/popover.tsx +0 -69
  20. package/components/radioGroup.tsx +0 -50
  21. package/components/select.tsx +0 -253
  22. package/components/tab.tsx +0 -85
  23. package/components/tableCell.tsx +0 -24
  24. package/components/tableContainer.tsx +0 -15
  25. package/components/tableHeader.tsx +0 -15
  26. package/components/tableHeaderCell.tsx +0 -24
  27. package/components/tableRow.tsx +0 -15
  28. package/components/tabsContainer.tsx +0 -23
  29. package/components/tag.tsx +0 -81
  30. package/components/textField.tsx +0 -116
  31. package/components/textarea.tsx +0 -120
  32. package/components/timeStamp.tsx +0 -65
  33. package/components/tooltip.tsx +0 -66
  34. package/components/userImage.tsx +0 -64
  35. package/designTokens.js +0 -234
  36. package/index.css +0 -8
  37. package/index.ts +0 -21
  38. package/next.config.mjs +0 -4
  39. package/postcss.config.mjs +0 -8
  40. package/tailwind.config.ts +0 -232
  41. package/tsconfig.json +0 -37
package/designTokens.js DELETED
@@ -1,234 +0,0 @@
1
- // design tokens definitions
2
- module.exports = {
3
- colors: {
4
- // light
5
- light:{
6
- text:{
7
- primary: '#000000',
8
- secondary: '#6D6D6D',
9
- disabled: '#9E9E9E',
10
- contrast: '#ffffff',
11
- },
12
- accent:{
13
- main: '#EEAE03',
14
- dark: '#CE8602',
15
- light: '#FFDD43',
16
- contrast: '#000000',
17
- },
18
- primary:{
19
- main: '#454545',
20
- dark: '#262626',
21
- light: '#888888',
22
- },
23
- secondary:{
24
- main: '#B0B0B0',
25
- dark: '#888888',
26
- light: '#D1D1D1',
27
- },
28
- error:{
29
- main: '#D32F2F',
30
- dark: '#B22323',
31
- light: '#F27777',
32
- },
33
- warning:{
34
- main: '#EF6C00',
35
- dark: '#CC5302',
36
- light: '#FFA732',
37
- },
38
- info:{
39
- main: '#0087D4',
40
- dark: '#006BAB',
41
- light: '#2CC1FF',
42
- },
43
- success:{
44
- main: '#328736',
45
- dark: '#2A6B2D',
46
- light: '#67C16B',
47
- },
48
- background:{
49
- default: '#e8e8e8',
50
- accent100:'#f1f1f1',
51
- accent200:'#f7f7f7',
52
- accent300:'#FFFFFF',
53
- },
54
- action:{
55
- active: '#888888',
56
- hover: '#F3F3F3',
57
- selected: '#E3E3E3',
58
- disabledBackground: '#D1D1D1',
59
- disabled: '#B0B0B0',
60
- },
61
- actionBackground:{
62
- enabled: '#FFFFFF',
63
- hovered: '#FFFFFF',
64
- selected: '#FFFFFF',
65
- disabled: '#EEEEEE',
66
- },
67
- actionOutlinedBorder:{
68
- enabled: '#888888',
69
- hovered: '#CDCDCD',
70
- selected: '#E8E8E8',
71
- disabled: '#B0B0B0',
72
- },
73
- misc:{
74
- divider: '#D1D1D1',
75
- },
76
- },
77
-
78
- // dark
79
- dark:{
80
- text:{
81
- primary: '#eeeeee',
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
-
153
- spacing: {
154
- small: '4px',
155
- medium: '8px',
156
- large: '16px',
157
- },
158
-
159
- typography: {
160
- family: 'Inter, sans-serif',
161
- h1: {
162
- weight: '300',
163
- size: '96px',
164
- lineHeight: '120%',
165
- letterSpacing: '-1.5px',
166
- },
167
- h2: {
168
- weight: '300',
169
- size: '60px',
170
- lineHeight: '120%',
171
- letterSpacing: '-0.5px',
172
- },
173
- h3: {
174
- weight: '400',
175
- size: '48px',
176
- lineHeight: '120%',
177
- letterSpacing: '0px',
178
- },
179
- h4: {
180
- weight: '400',
181
- size: '34px',
182
- lineHeight: '120%',
183
- letterSpacing: '0.3px',
184
- },
185
- h5: {
186
- weight: '400',
187
- size: '24px',
188
- lineHeight: '120%',
189
- letterSpacing: '0px',
190
- },
191
- h6: {
192
- weight: '500',
193
- size: '20px',
194
- lineHeight: '150%',
195
- letterSpacing: '0.2px',
196
- },
197
- subtitle1: {
198
- weight: '500',
199
- size: '16px',
200
- lineHeight: '150%',
201
- letterSpacing: '0.2px',
202
- },
203
- subtitle2: {
204
- weight: '500',
205
- size: '14px',
206
- lineHeight: '150%',
207
- letterSpacing: '0.1px',
208
- },
209
- body1: {
210
- weight: '400',
211
- size: '16px',
212
- lineHeight: '150%',
213
- letterSpacing: '0.2px',
214
- },
215
- body2: {
216
- weight: '400',
217
- size: '14px',
218
- lineHeight: '150%',
219
- letterSpacing: '0.2px',
220
- },
221
- caption: {
222
- weight: '400',
223
- size: '12px',
224
- lineHeight: '150%',
225
- letterSpacing: '0.5px',
226
- },
227
- alignments: {
228
- left: 'left',
229
- center: 'center',
230
- right: 'right',
231
- justify: 'justify',
232
- },
233
- },
234
- };
package/index.css DELETED
@@ -1,8 +0,0 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
5
-
6
- body {
7
- font-family: 'Inter', sans-serif;
8
- }
package/index.ts DELETED
@@ -1,21 +0,0 @@
1
- import './index.css';
2
- import './designTokens';
3
-
4
- export * from './components/alert';
5
- export * from './components/button';
6
- export * from './components/checkBox';
7
- export * from './components/emptyBox';
8
- export * from './components/iconButton';
9
- export * from './components/loadingScreen';
10
- export * from './components/menu';
11
- export * from './components/menuItem';
12
- export * from './components/modal';
13
- export * from './components/navigation';
14
- export * from './components/popover';
15
- export * from './components/select';
16
- export * from './components/tab';
17
- export * from './components/tag';
18
- export * from './components/textField';
19
- export * from './components/timeStamp'
20
- export * from './components/tooltip';
21
- export * from './components/userImage';
package/next.config.mjs DELETED
@@ -1,4 +0,0 @@
1
- /** @type {import('next').NextConfig} */
2
- const nextConfig = {};
3
-
4
- export default nextConfig;
@@ -1,8 +0,0 @@
1
- /** @type {import('postcss-load-config').Config} */
2
- const config = {
3
- plugins: {
4
- tailwindcss: {},
5
- },
6
- };
7
-
8
- export default config;
@@ -1,232 +0,0 @@
1
- import type { Config } from "tailwindcss";
2
-
3
- const designTokens = require('./designTokens');
4
-
5
- const config: Config = {
6
- content: [
7
- "./components/**/*.{js,ts,jsx,tsx,mdx}",
8
- ],
9
- theme: {
10
- extend: {
11
- colors: {
12
- // Light: text colors
13
- 'light-text-primary': designTokens.colors.light.text.primary,
14
- 'light-text-secondary': designTokens.colors.light.text.secondary,
15
- 'light-text-disabled': designTokens.colors.light.text.disabled,
16
- 'light-text-contrast': designTokens.colors.light.text.contrast,
17
-
18
- // Dark: text colors
19
- 'dark-text-primary': designTokens.colors.dark.text.primary,
20
- 'dark-text-secondary': designTokens.colors.dark.text.secondary,
21
- 'dark-text-disabled': designTokens.colors.dark.text.disabled,
22
- 'dark-text-contrast': designTokens.colors.dark.text.contrast,
23
-
24
- // light: accent colors
25
- 'light-accent-main': designTokens.colors.light.accent.main,
26
- 'light-accent-dark': designTokens.colors.light.accent.dark,
27
- 'light-accent-light': designTokens.colors.light.accent.light,
28
- 'light-accent-contrast': designTokens.colors.light.accent.contrast,
29
-
30
- // dark: accent colors
31
- 'dark-accent-main': designTokens.colors.dark.accent.main,
32
- 'dark-accent-dark': designTokens.colors.dark.accent.dark,
33
- 'dark-accent-light': designTokens.colors.dark.accent.light,
34
- 'dark-accent-contrast': designTokens.colors.dark.accent.contrast,
35
-
36
- // Light: primary colors
37
- 'light-primary-main': designTokens.colors.light.primary.main,
38
- 'light-primary-dark': designTokens.colors.light.primary.dark,
39
- 'light-primary-light': designTokens.colors.light.primary.light,
40
- 'light-primary-contrast': designTokens.colors.light.primary.contrast,
41
-
42
- // Dark: primary colors
43
- 'dark-primary-main': designTokens.colors.dark.primary.main,
44
- 'dark-primary-dark': designTokens.colors.dark.primary.dark,
45
- 'dark-primary-light': designTokens.colors.dark.primary.light,
46
- 'dark-primary-contrast': designTokens.colors.dark.primary.contrast,
47
-
48
- // light: secondary colors
49
- 'light-secondary-main': designTokens.colors.light.secondary.main,
50
- 'light-secondary-dark': designTokens.colors.light.secondary.dark,
51
- 'light-secondary-light': designTokens.colors.light.secondary.light,
52
-
53
- // dark: secondary colors
54
- 'dark-secondary-main': designTokens.colors.dark.secondary.main,
55
- 'dark-secondary-dark': designTokens.colors.dark.secondary.dark,
56
- 'dark-secondary-light': designTokens.colors.dark.secondary.light,
57
-
58
- // light: error colors
59
- 'light-error-main': designTokens.colors.light.error.main,
60
- 'light-error-dark': designTokens.colors.light.error.dark,
61
- 'light-error-light': designTokens.colors.light.error.light,
62
-
63
- // dark: error colors
64
- 'dark-error-main': designTokens.colors.dark.error.main,
65
- 'dark-error-dark': designTokens.colors.dark.error.dark,
66
- 'dark-error-light': designTokens.colors.dark.error.light,
67
-
68
- // light: warning colors
69
- 'light-warning-main': designTokens.colors.light.warning.main,
70
- 'light-warning-dark': designTokens.colors.light.warning.dark,
71
- 'light-warning-light': designTokens.colors.light.warning.light,
72
-
73
- // dark: warning colors
74
- 'dark-warning-main': designTokens.colors.dark.warning.main,
75
- 'dark-warning-dark': designTokens.colors.dark.warning.dark,
76
- 'dark-warning-light': designTokens.colors.dark.warning.light,
77
-
78
- // light: info colors
79
- 'light-info-main': designTokens.colors.light.info.main,
80
- 'light-info-dark': designTokens.colors.light.info.dark,
81
- 'light-info-light': designTokens.colors.light.info.light,
82
-
83
- // dark: info colors
84
- 'dark-info-main': designTokens.colors.dark.info.main,
85
- 'dark-info-dark': designTokens.colors.dark.info.dark,
86
- 'dark-info-light': designTokens.colors.dark.info.light,
87
-
88
- // light: success colors
89
- 'light-success-main': designTokens.colors.light.success.main,
90
- 'light-success-dark': designTokens.colors.light.success.dark,
91
- 'light-success-light': designTokens.colors.light.success.light,
92
-
93
- // dark: success colors
94
- 'dark-success-main': designTokens.colors.dark.success.main,
95
- 'dark-success-dark': designTokens.colors.dark.success.dark,
96
- 'dark-success-light': designTokens.colors.dark.success.light,
97
-
98
- // Light: background colors
99
- 'light-background-default': designTokens.colors.light.background.default,
100
- 'light-background-accent100': designTokens.colors.light.background.accent100,
101
- 'light-background-accent200': designTokens.colors.light.background.accent200,
102
- 'light-background-accent300': designTokens.colors.light.background.accent300,
103
-
104
- // Dark: background colors
105
- 'dark-background-default': designTokens.colors.dark.background.default,
106
- 'dark-background-accent100': designTokens.colors.dark.background.accent100,
107
- 'dark-background-accent200': designTokens.colors.dark.background.accent200,
108
- 'dark-background-accent300': designTokens.colors.dark.background.accent300,
109
-
110
- // Light: action colors
111
- 'light-action-active': designTokens.colors.light.action.active,
112
- 'light-action-hover': designTokens.colors.light.action.hover,
113
- 'light-action-selected': designTokens.colors.light.action.selected,
114
- 'light-action-disabledBackground': designTokens.colors.light.action.disabledBackground,
115
- 'light-action-disabled': designTokens.colors.light.action.disabled,
116
-
117
- // Dark: action colors
118
- 'dark-action-active': designTokens.colors.dark.action.active,
119
- 'dark-action-hover': designTokens.colors.dark.action.hover,
120
- 'dark-action-selected': designTokens.colors.dark.action.selected,
121
- 'dark-action-disabledBackground': designTokens.colors.dark.action.disabledBackground,
122
- 'dark-action-disabled': designTokens.colors.dark.action.disabled,
123
-
124
- // light: action background
125
- 'light-actionBackground-enabled': designTokens.colors.light.actionBackground.enabled,
126
- 'light-actionBackground-hovered': designTokens.colors.light.actionBackground.hovered,
127
- 'light-actionBackground-selected': designTokens.colors.light.actionBackground.selected,
128
- 'light-actionBackground-disabled': designTokens.colors.light.actionBackground.disabled,
129
-
130
- // dark: action background
131
- 'dark-actionBackground-enabled': designTokens.colors.dark.actionBackground.enabled,
132
- 'dark-actionBackground-hovered': designTokens.colors.dark.actionBackground.hovered,
133
- 'dark-actionBackground-selected': designTokens.colors.dark.actionBackground.selected,
134
- 'dark-actionBackground-disabled': designTokens.colors.dark.actionBackground.disabled,
135
-
136
- // light: action outlinedBorder
137
- 'light-actionOutlinedBorder-enabled': designTokens.colors.light.actionOutlinedBorder.enabled,
138
- 'light-actionOutlinedBorder-hovered': designTokens.colors.light.actionOutlinedBorder.hovered,
139
- 'light-actionOutlinedBorder-selected': designTokens.colors.light.actionOutlinedBorder.selected,
140
- 'light-actionOutlinedBorder-disabled': designTokens.colors.light.actionOutlinedBorder.disabled,
141
-
142
- // dark: action outlinedBorder
143
- 'dark-actionOutlinedBorder-enabled': designTokens.colors.dark.actionOutlinedBorder.enabled,
144
- 'dark-actionOutlinedBorder-hovered': designTokens.colors.dark.actionOutlinedBorder.hovered,
145
- 'dark-actionOutlinedBorder-selected': designTokens.colors.dark.actionOutlinedBorder.selected,
146
- 'dark-actionOutlinedBorder-disabled': designTokens.colors.dark.actionOutlinedBorder.disabled,
147
-
148
- // misc light colors
149
- 'light-misc-divider': designTokens.colors.light.misc.divider,
150
-
151
- // misc dark colors
152
- 'dark-misc-divider': designTokens.colors.dark.misc.divider,
153
-
154
- 'dark-misc-scrollbar-bg': designTokens.colors.dark.background.default,
155
- 'dark-misc-scrollbar-thumb': designTokens.colors.dark.background.accent200,
156
- },
157
- spacing: {
158
- small: designTokens.spacing.small,
159
- medium: designTokens.spacing.medium,
160
- large: designTokens.spacing.large,
161
- },
162
- fontSize: {
163
- h1: designTokens.typography.h1.size,
164
- h2: designTokens.typography.h2.size,
165
- h3: designTokens.typography.h3.size,
166
- h4: designTokens.typography.h4.size,
167
- h5: designTokens.typography.h5.size,
168
- h6: designTokens.typography.h6.size,
169
- subtitle1: designTokens.typography.subtitle1.size,
170
- subtitle2: designTokens.typography.subtitle2.size,
171
- body1: designTokens.typography.body1.size,
172
- body2: designTokens.typography.body2.size,
173
- caption: designTokens.typography.caption.size,
174
- },
175
- fontFamily: {
176
- inter: designTokens.typography.family,
177
- },
178
- fontWeight: {
179
- h1: designTokens.typography.h1.weight,
180
- h2: designTokens.typography.h2.weight,
181
- h3: designTokens.typography.h3.weight,
182
- h4: designTokens.typography.h4.weight,
183
- h5: designTokens.typography.h5.weight,
184
- h6: designTokens.typography.h6.weight,
185
- subtitle1: designTokens.typography.subtitle1.weight,
186
- subtitle2: designTokens.typography.subtitle2.weight,
187
- body1: designTokens.typography.body1.weight,
188
- body2: designTokens.typography.body2.weight,
189
- caption: designTokens.typography.caption.weight,
190
- },
191
- letterSpacing: {
192
- h1: designTokens.typography.h1.letterSpacing,
193
- h2: designTokens.typography.h2.letterSpacing,
194
- h3: designTokens.typography.h3.letterSpacing,
195
- h4: designTokens.typography.h4.letterSpacing,
196
- h5: designTokens.typography.h5.letterSpacing,
197
- h6: designTokens.typography.h6.letterSpacing,
198
- subtitle1: designTokens.typography.subtitle1.letterSpacing,
199
- subtitle2: designTokens.typography.subtitle2.letterSpacing,
200
- body1: designTokens.typography.body1.letterSpacing,
201
- body2: designTokens.typography.body2.letterSpacing,
202
- caption: designTokens.typography.caption.letterSpacing,
203
- },
204
- lineHeight: {
205
- h1: designTokens.typography.h1.lineHeight,
206
- h2: designTokens.typography.h2.lineHeight,
207
- h3: designTokens.typography.h3.lineHeight,
208
- h4: designTokens.typography.h4.lineHeight,
209
- h5: designTokens.typography.h5.lineHeight,
210
- h6: designTokens.typography.h6.lineHeight,
211
- subtitle1: designTokens.typography.subtitle1.lineHeight,
212
- subtitle2: designTokens.typography.subtitle2.lineHeight,
213
- body1: designTokens.typography.body1.lineHeight,
214
- body2: designTokens.typography.body2.lineHeight,
215
- caption: designTokens.typography.caption.lineHeight,
216
- },
217
- textAlign: {
218
- left: designTokens.typography.alignments.left,
219
- center: designTokens.typography.alignments.center,
220
- right: designTokens.typography.alignments.right,
221
- justify: designTokens.typography.alignments.justify,
222
- },
223
- },
224
- },
225
- plugins: [
226
- require('tailwindcss'),
227
- require('autoprefixer'),
228
- require('tailwind-scrollbar'),
229
-
230
- ],
231
- };
232
- export default config;
package/tsconfig.json DELETED
@@ -1,37 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "lib": [ "dom", "dom.iterable", "esnext" ],
4
- "allowJs": true,
5
- "skipLibCheck": true,
6
- "strict": true,
7
- "esModuleInterop": true,
8
- "module": "esnext",
9
- "moduleResolution": "node",
10
- "resolveJsonModule": true,
11
- "isolatedModules": true,
12
- "jsx": "preserve",
13
- "incremental": true,
14
- "plugins": [
15
- {
16
- "name": "next"
17
- }
18
- ],
19
- "paths": {
20
- "@/*": [ "./*" ]
21
- },
22
- "forceConsistentCasingInFileNames": true,
23
- "declaration": true,
24
- "declarationDir": "./dist", // Output .d.ts files to dist
25
- "outDir": "./dist", // Output compiled .js files to dist
26
- "emitDeclarationOnly": false
27
- },
28
- "include": [
29
- "next-env.d.ts",
30
- "**/*.ts",
31
- "**/*.tsx",
32
- "components/*.tsx",
33
- "*.js",
34
- "index.css"
35
- ],
36
- "exclude": [ "node_modules", "dist" ]
37
- }