linkedunion-design-kit 0.1.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/.eslintrc.json +6 -0
- package/.storybook/main.ts +20 -0
- package/.storybook/preview.ts +15 -0
- package/README.md +36 -0
- package/_test_/Color.test.js +42 -0
- package/app/favicon.ico +0 -0
- package/app/globals.css +27 -0
- package/app/layout.tsx +22 -0
- package/app/page.tsx +113 -0
- package/components/Color/Color.stories.tsx +87 -0
- package/components/Color/Color.tsx +19 -0
- package/components/Typography/Typography.stories.tsx +59 -0
- package/components/Typography/Typography.tsx +8 -0
- package/dist/app/layout.d.ts +6 -0
- package/dist/app/layout.jsx +13 -0
- package/dist/app/page.d.ts +1 -0
- package/dist/app/page.jsx +71 -0
- package/dist/components/Color/Color.d.ts +3 -0
- package/dist/components/Color/Color.jsx +16 -0
- package/dist/components/Color/Color.stories.d.ts +10 -0
- package/dist/components/Color/Color.stories.jsx +76 -0
- package/dist/components/Typography/Typography.d.ts +3 -0
- package/dist/components/Typography/Typography.jsx +7 -0
- package/dist/components/Typography/Typography.stories.d.ts +5 -0
- package/dist/components/Typography/Typography.stories.jsx +51 -0
- package/dist/global.css +8806 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/tailwind.config.d.ts +3 -0
- package/dist/tailwind.config.js +75 -0
- package/dist/utils/index.d.ts +305 -0
- package/dist/utils/index.js +413 -0
- package/index.ts +3 -0
- package/jest.config.js +23 -0
- package/jest.setup.js +25 -0
- package/next.config.js +4 -0
- package/package-lock.json +12682 -0
- package/package.json +60 -0
- package/postcss.config.js +6 -0
- package/public/next.svg +1 -0
- package/public/vercel.svg +1 -0
- package/tailwind.config.ts +89 -0
- package/tsconfig.json +50 -0
- package/types/interface.d.ts +18 -0
- package/utils/index.ts +439 -0
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
2
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
3
|
+
if (ar || !(i in from)) {
|
|
4
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
5
|
+
ar[i] = from[i];
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
|
+
};
|
|
10
|
+
import { colorGroups, customAspectRatio, customBorderRadius, customBorderWidth, customBoxShadow, customColors, customFontSize, customFontWeight, customHeight, customLineHeight, customLogoSize, customMinHeight, customMinWidth, customOpacity, customSize, customSpacing, customTextAlignment, customTextDecoration, customTextTransform, customTextWrap, customWidth, fontSizes, fontWeights, lineHeights, textAlignment, textDecorations, textTransform, textWraps } from './utils';
|
|
11
|
+
import generateUtilities from './utils';
|
|
12
|
+
var plugin = require('tailwindcss/plugin');
|
|
13
|
+
var config = {
|
|
14
|
+
content: [
|
|
15
|
+
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
16
|
+
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
17
|
+
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
18
|
+
],
|
|
19
|
+
safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], colorGroups.primary.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.gray.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.success.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.warning.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.danger.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.info.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), fontSizes.map(function (fontSize) { return ({ pattern: new RegExp(fontSize.key) }); }), true), fontWeights.map(function (fontWeight) { return ({ pattern: new RegExp(fontWeight.key) }); }), true), lineHeights.map(function (lineHeight) { return ({ pattern: new RegExp(lineHeight.key) }); }), true), textAlignment.map(function (textAlign) { return ({ pattern: new RegExp(textAlign.key) }); }), true), textTransform.map(function (textTrans) { return ({ pattern: new RegExp(textTrans.key) }); }), true), textDecorations.map(function (textDec) { return ({ pattern: new RegExp(textDec.key) }); }), true), textWraps.map(function (textWrap) { return ({ pattern: new RegExp(textWrap.key) }); }), true),
|
|
20
|
+
theme: {
|
|
21
|
+
extend: {
|
|
22
|
+
backgroundImage: {
|
|
23
|
+
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
24
|
+
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
25
|
+
},
|
|
26
|
+
colors: customColors,
|
|
27
|
+
fontSize: customFontSize,
|
|
28
|
+
fontWeight: customFontWeight,
|
|
29
|
+
lineHeight: customLineHeight,
|
|
30
|
+
textAlign: customTextAlignment,
|
|
31
|
+
textTransform: customTextTransform,
|
|
32
|
+
textDecoration: customTextDecoration,
|
|
33
|
+
textWrap: customTextWrap,
|
|
34
|
+
size: customSize,
|
|
35
|
+
width: customWidth,
|
|
36
|
+
height: customHeight,
|
|
37
|
+
minWidth: customMinWidth,
|
|
38
|
+
minHeight: customMinHeight,
|
|
39
|
+
logoSize: customLogoSize,
|
|
40
|
+
spacing: customSpacing,
|
|
41
|
+
opacity: customOpacity,
|
|
42
|
+
borderWidth: customBorderWidth,
|
|
43
|
+
borderRadius: customBorderRadius,
|
|
44
|
+
aspectRatio: customAspectRatio,
|
|
45
|
+
boxShadow: customBoxShadow
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
plugins: [
|
|
49
|
+
plugin(function (_a) {
|
|
50
|
+
var addUtilities = _a.addUtilities, theme = _a.theme;
|
|
51
|
+
//Font Size plugin
|
|
52
|
+
var fontSizeUtilities = generateUtilities('fontSize', theme);
|
|
53
|
+
addUtilities(fontSizeUtilities, ['responsive']);
|
|
54
|
+
//Font Weight plugin
|
|
55
|
+
var fontWeightUtilities = generateUtilities('fontWeight', theme);
|
|
56
|
+
addUtilities(fontWeightUtilities, ['responsive']);
|
|
57
|
+
//Line Height plugin
|
|
58
|
+
var lineHeightUtilities = generateUtilities('lineHeight', theme);
|
|
59
|
+
addUtilities(lineHeightUtilities, ['responsive']);
|
|
60
|
+
//Text Alignment plugin
|
|
61
|
+
var textAlignmentUtilities = generateUtilities('textAlign', theme);
|
|
62
|
+
addUtilities(textAlignmentUtilities, ['responsive']);
|
|
63
|
+
//Text Transform plugin
|
|
64
|
+
var textTransformUtilities = generateUtilities('textTransform', theme);
|
|
65
|
+
addUtilities(textTransformUtilities, ['responsive']);
|
|
66
|
+
//Text Decoration plugin
|
|
67
|
+
var textDecorationUtilities = generateUtilities('textDecoration', theme);
|
|
68
|
+
addUtilities(textDecorationUtilities, ['responsive']);
|
|
69
|
+
//Text Wrap plugin
|
|
70
|
+
var textWrapUtilities = generateUtilities('textWrap', theme);
|
|
71
|
+
addUtilities(textWrapUtilities, ['responsive']);
|
|
72
|
+
}),
|
|
73
|
+
],
|
|
74
|
+
};
|
|
75
|
+
export default config;
|
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
export declare const text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
|
|
2
|
+
export declare const colorGroups: {
|
|
3
|
+
primary: string[];
|
|
4
|
+
gray: string[];
|
|
5
|
+
success: string[];
|
|
6
|
+
warning: string[];
|
|
7
|
+
danger: string[];
|
|
8
|
+
info: string[];
|
|
9
|
+
};
|
|
10
|
+
export declare const fontSizes: {
|
|
11
|
+
key: string;
|
|
12
|
+
label: string;
|
|
13
|
+
}[];
|
|
14
|
+
export declare const fontWeights: {
|
|
15
|
+
key: string;
|
|
16
|
+
label: string;
|
|
17
|
+
}[];
|
|
18
|
+
export declare const lineHeights: {
|
|
19
|
+
key: string;
|
|
20
|
+
label: string;
|
|
21
|
+
}[];
|
|
22
|
+
export declare const textAlignment: {
|
|
23
|
+
key: string;
|
|
24
|
+
label: string;
|
|
25
|
+
}[];
|
|
26
|
+
export declare const textTransform: {
|
|
27
|
+
key: string;
|
|
28
|
+
label: string;
|
|
29
|
+
}[];
|
|
30
|
+
export declare const textDecorations: {
|
|
31
|
+
key: string;
|
|
32
|
+
label: string;
|
|
33
|
+
}[];
|
|
34
|
+
export declare const textWraps: {
|
|
35
|
+
key: string;
|
|
36
|
+
label: string;
|
|
37
|
+
}[];
|
|
38
|
+
export default function generateUtilities(property: string, theme: (property: string) => Record<string, string>): Record<string, Record<string, string>>;
|
|
39
|
+
export declare const customColors: {
|
|
40
|
+
white: string;
|
|
41
|
+
black: string;
|
|
42
|
+
primary: {
|
|
43
|
+
0: string;
|
|
44
|
+
100: string;
|
|
45
|
+
200: string;
|
|
46
|
+
300: string;
|
|
47
|
+
400: string;
|
|
48
|
+
500: string;
|
|
49
|
+
600: string;
|
|
50
|
+
700: string;
|
|
51
|
+
800: string;
|
|
52
|
+
900: string;
|
|
53
|
+
1000: string;
|
|
54
|
+
};
|
|
55
|
+
gray: {
|
|
56
|
+
0: string;
|
|
57
|
+
100: string;
|
|
58
|
+
200: string;
|
|
59
|
+
300: string;
|
|
60
|
+
400: string;
|
|
61
|
+
500: string;
|
|
62
|
+
600: string;
|
|
63
|
+
700: string;
|
|
64
|
+
800: string;
|
|
65
|
+
900: string;
|
|
66
|
+
1000: string;
|
|
67
|
+
};
|
|
68
|
+
success: {
|
|
69
|
+
0: string;
|
|
70
|
+
100: string;
|
|
71
|
+
200: string;
|
|
72
|
+
300: string;
|
|
73
|
+
400: string;
|
|
74
|
+
500: string;
|
|
75
|
+
600: string;
|
|
76
|
+
700: string;
|
|
77
|
+
800: string;
|
|
78
|
+
900: string;
|
|
79
|
+
1000: string;
|
|
80
|
+
};
|
|
81
|
+
warning: {
|
|
82
|
+
0: string;
|
|
83
|
+
100: string;
|
|
84
|
+
200: string;
|
|
85
|
+
300: string;
|
|
86
|
+
400: string;
|
|
87
|
+
500: string;
|
|
88
|
+
600: string;
|
|
89
|
+
700: string;
|
|
90
|
+
800: string;
|
|
91
|
+
900: string;
|
|
92
|
+
1000: string;
|
|
93
|
+
};
|
|
94
|
+
danger: {
|
|
95
|
+
0: string;
|
|
96
|
+
100: string;
|
|
97
|
+
200: string;
|
|
98
|
+
300: string;
|
|
99
|
+
400: string;
|
|
100
|
+
500: string;
|
|
101
|
+
600: string;
|
|
102
|
+
700: string;
|
|
103
|
+
800: string;
|
|
104
|
+
900: string;
|
|
105
|
+
1000: string;
|
|
106
|
+
};
|
|
107
|
+
info: {
|
|
108
|
+
0: string;
|
|
109
|
+
100: string;
|
|
110
|
+
200: string;
|
|
111
|
+
300: string;
|
|
112
|
+
400: string;
|
|
113
|
+
500: string;
|
|
114
|
+
600: string;
|
|
115
|
+
700: string;
|
|
116
|
+
800: string;
|
|
117
|
+
900: string;
|
|
118
|
+
1000: string;
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
export declare const customFontSize: {
|
|
122
|
+
'lu-base-font-size': string;
|
|
123
|
+
'lu-font-size-x-small': string;
|
|
124
|
+
'lu-font-size-small': string;
|
|
125
|
+
'lu-font-size-medium': string;
|
|
126
|
+
'lu-font-size-large': string;
|
|
127
|
+
'lu-font-size-x-large': string;
|
|
128
|
+
'lu-font-size-2x-large': string;
|
|
129
|
+
'lu-font-size-3x-large': string;
|
|
130
|
+
'lu-font-size-4x-large': string;
|
|
131
|
+
'lu-font-size-5x-large': string;
|
|
132
|
+
'lu-font-size-6x-large': string;
|
|
133
|
+
'lu-font-size-7x-large': string;
|
|
134
|
+
'lu-font-size-huge': string;
|
|
135
|
+
};
|
|
136
|
+
export declare const customFontWeight: {
|
|
137
|
+
'lu-font-weight-thin': string;
|
|
138
|
+
'lu-font-weight-extra-light': string;
|
|
139
|
+
'lu-font-weight-light': string;
|
|
140
|
+
'lu-font-weight-regular': string;
|
|
141
|
+
'lu-font-weight-medium': string;
|
|
142
|
+
'lu-font-weight-semibold': string;
|
|
143
|
+
'lu-font-weight-bold': string;
|
|
144
|
+
'lu-font-weight-extra-bold': string;
|
|
145
|
+
'lu-font-weight-black': string;
|
|
146
|
+
};
|
|
147
|
+
export declare const customLineHeight: {
|
|
148
|
+
'lu-line-height-xs': string;
|
|
149
|
+
'lu-line-height-sm': string;
|
|
150
|
+
'lu-line-height-base': string;
|
|
151
|
+
'lu-line-height-lg': string;
|
|
152
|
+
};
|
|
153
|
+
export declare const customTextAlignment: {
|
|
154
|
+
'lu-text-left': string;
|
|
155
|
+
'lu-text-center': string;
|
|
156
|
+
'lu-text-right': string;
|
|
157
|
+
'lu-text-justify': string;
|
|
158
|
+
'lu-text-space-between': string;
|
|
159
|
+
};
|
|
160
|
+
export declare const customTextTransform: {
|
|
161
|
+
'lu-text-lowercase': string;
|
|
162
|
+
'lu-text-uppercase': string;
|
|
163
|
+
'lu-text-capitalize': string;
|
|
164
|
+
};
|
|
165
|
+
export declare const customTextDecoration: {
|
|
166
|
+
'lu-text-decoration-none': string;
|
|
167
|
+
'lu-text-decoration-underline': string;
|
|
168
|
+
'lu-text-decoration-linethrough': string;
|
|
169
|
+
};
|
|
170
|
+
export declare const customTextWrap: {
|
|
171
|
+
'lu-text-wrap': string;
|
|
172
|
+
'lu-text-nowrap': string;
|
|
173
|
+
};
|
|
174
|
+
export declare const customSize: {
|
|
175
|
+
'lu-size-050': string;
|
|
176
|
+
'lu-size-100': string;
|
|
177
|
+
'lu-size-200': string;
|
|
178
|
+
'lu-size-300': string;
|
|
179
|
+
'lu-size-400': string;
|
|
180
|
+
'lu-size-500': string;
|
|
181
|
+
'lu-size-600': string;
|
|
182
|
+
'lu-size-800': string;
|
|
183
|
+
'lu-size-1000': string;
|
|
184
|
+
'lu-size-1500': string;
|
|
185
|
+
'lu-size-2000': string;
|
|
186
|
+
'lu-size-2500': string;
|
|
187
|
+
};
|
|
188
|
+
export declare const customWidth: {
|
|
189
|
+
'lu-width-10': string;
|
|
190
|
+
'lu-width-25': string;
|
|
191
|
+
'lu-width-50': string;
|
|
192
|
+
'lu-width-75': string;
|
|
193
|
+
'lu-width-100': string;
|
|
194
|
+
};
|
|
195
|
+
export declare const customHeight: {
|
|
196
|
+
'lu-height-10': string;
|
|
197
|
+
'lu-height-25': string;
|
|
198
|
+
'lu-height-50': string;
|
|
199
|
+
'lu-height-75': string;
|
|
200
|
+
'lu-height-100': string;
|
|
201
|
+
};
|
|
202
|
+
export declare const customMinWidth: {
|
|
203
|
+
'lu-min-width-400': string;
|
|
204
|
+
'lu-min-width-500': string;
|
|
205
|
+
'lu-min-width-600': string;
|
|
206
|
+
'lu-min-width-800': string;
|
|
207
|
+
'lu-min-width-1000': string;
|
|
208
|
+
'lu-min-width-1500': string;
|
|
209
|
+
'lu-min-width-2000': string;
|
|
210
|
+
'lu-min-width-2500': string;
|
|
211
|
+
'lu-min-width-3000': string;
|
|
212
|
+
};
|
|
213
|
+
export declare const customMinHeight: {
|
|
214
|
+
'lu-min-height-400': string;
|
|
215
|
+
'lu-min-height-500': string;
|
|
216
|
+
'lu-min-height-600': string;
|
|
217
|
+
'lu-min-height-800': string;
|
|
218
|
+
'lu-min-height-1000': string;
|
|
219
|
+
'lu-min-height-1500': string;
|
|
220
|
+
'lu-min-height-2000': string;
|
|
221
|
+
'lu-min-height-2500': string;
|
|
222
|
+
'lu-min-height-3000': string;
|
|
223
|
+
};
|
|
224
|
+
export declare const customLogoSize: {
|
|
225
|
+
'lu-primary-logo': string;
|
|
226
|
+
'lu-secondary-logo': string;
|
|
227
|
+
'lu-favicon-logo': string;
|
|
228
|
+
};
|
|
229
|
+
export declare const customSpacing: {
|
|
230
|
+
'lu-space-0': string;
|
|
231
|
+
'lu-space-050': string;
|
|
232
|
+
'lu-space-100': string;
|
|
233
|
+
'lu-space-150': string;
|
|
234
|
+
'lu-space-200': string;
|
|
235
|
+
'lu-space-250': string;
|
|
236
|
+
'lu-space-300': string;
|
|
237
|
+
'lu-space-400': string;
|
|
238
|
+
'lu-space-500': string;
|
|
239
|
+
'lu-space-600': string;
|
|
240
|
+
'lu-space-800': string;
|
|
241
|
+
'lu-space-1000': string;
|
|
242
|
+
'lu-space-1500': string;
|
|
243
|
+
'lu-space-2000': string;
|
|
244
|
+
'lu-space-2500': string;
|
|
245
|
+
'lu-space-3000': string;
|
|
246
|
+
};
|
|
247
|
+
export declare const customOpacity: {
|
|
248
|
+
'lu-opacity-0': string;
|
|
249
|
+
'lu-opacity-5': string;
|
|
250
|
+
'lu-opacity-10': string;
|
|
251
|
+
'lu-opacity-15': string;
|
|
252
|
+
'lu-opacity-20': string;
|
|
253
|
+
'lu-opacity-25': string;
|
|
254
|
+
'lu-opacity-30': string;
|
|
255
|
+
'lu-opacity-40': string;
|
|
256
|
+
'lu-opacity-50': string;
|
|
257
|
+
'lu-opacity-60': string;
|
|
258
|
+
'lu-opacity-70': string;
|
|
259
|
+
'lu-opacity-75': string;
|
|
260
|
+
'lu-opacity-80': string;
|
|
261
|
+
'lu-opacity-90': string;
|
|
262
|
+
'lu-opacity-95': string;
|
|
263
|
+
'lu-opacity-100': string;
|
|
264
|
+
};
|
|
265
|
+
export declare const customBorderWidth: {
|
|
266
|
+
'lu-border-width-0125': string;
|
|
267
|
+
'lu-border-width-025': string;
|
|
268
|
+
'lu-border-width-050': string;
|
|
269
|
+
'lu-border-width-100': string;
|
|
270
|
+
};
|
|
271
|
+
export declare const customBorderRadius: {
|
|
272
|
+
'lu-border-rounded-none': string;
|
|
273
|
+
'lu-border-rounded-xs': string;
|
|
274
|
+
'lu-border-rounded-sm': string;
|
|
275
|
+
'lu-border-rounded-md': string;
|
|
276
|
+
'lu-border-rounded-lg': string;
|
|
277
|
+
'lu-border-rounded-xl': string;
|
|
278
|
+
'lu-border-rounded-2xl': string;
|
|
279
|
+
'lu-border-rounded-3xl': string;
|
|
280
|
+
'lu-border-rounded-full': string;
|
|
281
|
+
};
|
|
282
|
+
export declare const customAspectRatio: {
|
|
283
|
+
'lu-aspect-square': string;
|
|
284
|
+
'lu-aspect-2/1-landsc': string;
|
|
285
|
+
'lu-aspect-1/2-por': string;
|
|
286
|
+
'lu-aspect-3/2-landsc': string;
|
|
287
|
+
'lu-aspect-2/3-por': string;
|
|
288
|
+
'lu-aspect-4/3-landsc': string;
|
|
289
|
+
'lu-aspect-3/4-por': string;
|
|
290
|
+
'lu-aspect-5/4-landsc': string;
|
|
291
|
+
'lu-aspect-4/5-por': string;
|
|
292
|
+
'lu-aspect-7/5-landsc': string;
|
|
293
|
+
'lu-aspect-5/7-por': string;
|
|
294
|
+
'lu-aspect-16/9-landsc': string;
|
|
295
|
+
'lu-aspect-9/16-por': string;
|
|
296
|
+
'lu-aspect-21/9-landscape': string;
|
|
297
|
+
'lu-aspect-9/21-por': string;
|
|
298
|
+
};
|
|
299
|
+
export declare const customBoxShadow: {
|
|
300
|
+
'lu-shadow-xs': string;
|
|
301
|
+
'lu-shadow-sm': string;
|
|
302
|
+
'lu-shadow-md': string;
|
|
303
|
+
'lu-shadow-lg': string;
|
|
304
|
+
'lu-shadow-xl': string;
|
|
305
|
+
};
|