@duyluonganduin/acl-web-components 0.0.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/README.md +187 -0
- package/dist/acl-web-components.cjs +666 -0
- package/dist/acl-web-components.d.ts +341 -0
- package/dist/acl-web-components.js +2781 -0
- package/dist/tailwind-preset.cjs +1 -0
- package/dist/tailwind-preset.d.ts +11 -0
- package/dist/tailwind-preset.js +179 -0
- package/dist/tailwind-theme.css +168 -0
- package/dist/tokens.css +180 -0
- package/package.json +48 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const r={content:[],theme:{extend:{colors:{gray:{0:"var(--color-gray-0)",1:"var(--color-gray-1)",2:"var(--color-gray-2)",3:"var(--color-gray-3)",4:"var(--color-gray-4)",5:"var(--color-gray-5)",6:"var(--color-gray-6)",7:"var(--color-gray-7)",8:"var(--color-gray-8)",9:"var(--color-gray-9)"},primary:{1:"var(--color-primary-1)",2:"var(--color-primary-2)",3:"var(--color-primary-3)",4:"var(--color-primary-4)",5:"var(--color-primary-5)"},danger:{1:"var(--color-danger-1)",2:"var(--color-danger-2)",3:"var(--color-danger-3)",4:"var(--color-danger-4)",5:"var(--color-danger-5)"},success:{1:"var(--color-success-1)",2:"var(--color-success-2)",3:"var(--color-success-3)",4:"var(--color-success-4)",5:"var(--color-success-5)"},warning:{1:"var(--color-warning-1)",2:"var(--color-warning-2)",3:"var(--color-warning-3)",4:"var(--color-warning-4)",5:"var(--color-warning-5)"},semantic:{gray:{0:"var(--color-semantic-gray-0)",1:"var(--color-semantic-gray-1)",2:"var(--color-semantic-gray-2)",3:"var(--color-semantic-gray-3)",4:"var(--color-semantic-gray-4)",5:"var(--color-semantic-gray-5)",6:"var(--color-semantic-gray-6)",7:"var(--color-semantic-gray-7)",8:"var(--color-semantic-gray-8)",9:"var(--color-semantic-gray-9)"},primary:{1:"var(--color-semantic-primary-1)",2:"var(--color-semantic-primary-2)",3:"var(--color-semantic-primary-3)",4:"var(--color-semantic-primary-4)",5:"var(--color-semantic-primary-5)"},danger:{1:"var(--color-semantic-danger-1)",2:"var(--color-semantic-danger-2)",3:"var(--color-semantic-danger-3)",4:"var(--color-semantic-danger-4)",5:"var(--color-semantic-danger-5)"},success:{1:"var(--color-semantic-success-1)",2:"var(--color-semantic-success-2)",3:"var(--color-semantic-success-3)",4:"var(--color-semantic-success-4)",5:"var(--color-semantic-success-5)"},warning:{1:"var(--color-semantic-warning-1)",2:"var(--color-semantic-warning-2)",3:"var(--color-semantic-warning-3)",4:"var(--color-semantic-warning-4)",5:"var(--color-semantic-warning-5)"}},white:"var(--color-white)"},fontFamily:{sans:"var(--font-sans)",mono:"var(--font-mono)"},fontSize:{9:["var(--text-9)",{lineHeight:"var(--leading-16)"}],10:["var(--text-10)",{lineHeight:"var(--leading-16)"}],11:["var(--text-11)",{lineHeight:"var(--leading-16)"}],13:["var(--text-13)",{lineHeight:"var(--leading-20)"}],15:["var(--text-15)",{lineHeight:"var(--leading-24)"}],17:["var(--text-17)",{lineHeight:"var(--leading-24)"}],20:["var(--text-20)",{lineHeight:"var(--leading-28)"}],23:["var(--text-23)",{lineHeight:"var(--leading-32)"}],26:["var(--text-26)",{lineHeight:"var(--leading-32)"}],30:["var(--text-30)",{lineHeight:"var(--leading-40)"}],35:["var(--text-35)",{lineHeight:"var(--leading-44)"}]},fontWeight:{normal:"var(--font-weight-normal)",medium:"var(--font-weight-medium)",semibold:"var(--font-weight-semibold)",bold:"var(--font-weight-bold)"},lineHeight:{16:"var(--leading-16)",20:"var(--leading-20)",24:"var(--leading-24)",28:"var(--leading-28)",32:"var(--leading-32)",40:"var(--leading-40)",44:"var(--leading-44)",r1p5:"var(--leading-r1p5)"},borderRadius:{none:"var(--radius-0)",sm:"var(--radius-2)",3:"var(--radius-3)",DEFAULT:"var(--radius-4)",md:"var(--radius-6)",lg:"var(--radius-8)",xl:"var(--radius-12)","2xl":"var(--radius-16)","3xl":"var(--radius-20)","4xl":"var(--radius-24)",full:"var(--radius-full)"},boxShadow:{1:"var(--shadow-1)",2:"var(--shadow-2)",3:"var(--shadow-3)",4:"var(--shadow-4)"},spacing:{px:"var(--spacing-px)",0:"var(--spacing-0)",2:"var(--spacing-2)",4:"var(--spacing-4)",6:"var(--spacing-6)",8:"var(--spacing-8)",12:"var(--spacing-12)",16:"var(--spacing-16)",20:"var(--spacing-20)",24:"var(--spacing-24)",28:"var(--spacing-28)",32:"var(--spacing-32)",40:"var(--spacing-40)",48:"var(--spacing-48)",56:"var(--spacing-56)",64:"var(--spacing-64)",128:"var(--spacing-128)",256:"var(--spacing-256)"},zIndex:{0:"var(--z-0)",1:"var(--z-1)",2:"var(--z-2)",3:"var(--z-3)",4:"var(--z-4)",5:"var(--z-5)",999:"var(--z-999)",9999:"var(--z-9999)"}}}};module.exports=r;
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
const a = {
|
|
2
|
+
content: [],
|
|
3
|
+
theme: {
|
|
4
|
+
extend: {
|
|
5
|
+
colors: {
|
|
6
|
+
// Primitive palette
|
|
7
|
+
gray: {
|
|
8
|
+
0: "var(--color-gray-0)",
|
|
9
|
+
1: "var(--color-gray-1)",
|
|
10
|
+
2: "var(--color-gray-2)",
|
|
11
|
+
3: "var(--color-gray-3)",
|
|
12
|
+
4: "var(--color-gray-4)",
|
|
13
|
+
5: "var(--color-gray-5)",
|
|
14
|
+
6: "var(--color-gray-6)",
|
|
15
|
+
7: "var(--color-gray-7)",
|
|
16
|
+
8: "var(--color-gray-8)",
|
|
17
|
+
9: "var(--color-gray-9)"
|
|
18
|
+
},
|
|
19
|
+
primary: {
|
|
20
|
+
1: "var(--color-primary-1)",
|
|
21
|
+
2: "var(--color-primary-2)",
|
|
22
|
+
3: "var(--color-primary-3)",
|
|
23
|
+
4: "var(--color-primary-4)",
|
|
24
|
+
5: "var(--color-primary-5)"
|
|
25
|
+
},
|
|
26
|
+
danger: {
|
|
27
|
+
1: "var(--color-danger-1)",
|
|
28
|
+
2: "var(--color-danger-2)",
|
|
29
|
+
3: "var(--color-danger-3)",
|
|
30
|
+
4: "var(--color-danger-4)",
|
|
31
|
+
5: "var(--color-danger-5)"
|
|
32
|
+
},
|
|
33
|
+
success: {
|
|
34
|
+
1: "var(--color-success-1)",
|
|
35
|
+
2: "var(--color-success-2)",
|
|
36
|
+
3: "var(--color-success-3)",
|
|
37
|
+
4: "var(--color-success-4)",
|
|
38
|
+
5: "var(--color-success-5)"
|
|
39
|
+
},
|
|
40
|
+
warning: {
|
|
41
|
+
1: "var(--color-warning-1)",
|
|
42
|
+
2: "var(--color-warning-2)",
|
|
43
|
+
3: "var(--color-warning-3)",
|
|
44
|
+
4: "var(--color-warning-4)",
|
|
45
|
+
5: "var(--color-warning-5)"
|
|
46
|
+
},
|
|
47
|
+
// Semantic aliases
|
|
48
|
+
semantic: {
|
|
49
|
+
gray: {
|
|
50
|
+
0: "var(--color-semantic-gray-0)",
|
|
51
|
+
1: "var(--color-semantic-gray-1)",
|
|
52
|
+
2: "var(--color-semantic-gray-2)",
|
|
53
|
+
3: "var(--color-semantic-gray-3)",
|
|
54
|
+
4: "var(--color-semantic-gray-4)",
|
|
55
|
+
5: "var(--color-semantic-gray-5)",
|
|
56
|
+
6: "var(--color-semantic-gray-6)",
|
|
57
|
+
7: "var(--color-semantic-gray-7)",
|
|
58
|
+
8: "var(--color-semantic-gray-8)",
|
|
59
|
+
9: "var(--color-semantic-gray-9)"
|
|
60
|
+
},
|
|
61
|
+
primary: {
|
|
62
|
+
1: "var(--color-semantic-primary-1)",
|
|
63
|
+
2: "var(--color-semantic-primary-2)",
|
|
64
|
+
3: "var(--color-semantic-primary-3)",
|
|
65
|
+
4: "var(--color-semantic-primary-4)",
|
|
66
|
+
5: "var(--color-semantic-primary-5)"
|
|
67
|
+
},
|
|
68
|
+
danger: {
|
|
69
|
+
1: "var(--color-semantic-danger-1)",
|
|
70
|
+
2: "var(--color-semantic-danger-2)",
|
|
71
|
+
3: "var(--color-semantic-danger-3)",
|
|
72
|
+
4: "var(--color-semantic-danger-4)",
|
|
73
|
+
5: "var(--color-semantic-danger-5)"
|
|
74
|
+
},
|
|
75
|
+
success: {
|
|
76
|
+
1: "var(--color-semantic-success-1)",
|
|
77
|
+
2: "var(--color-semantic-success-2)",
|
|
78
|
+
3: "var(--color-semantic-success-3)",
|
|
79
|
+
4: "var(--color-semantic-success-4)",
|
|
80
|
+
5: "var(--color-semantic-success-5)"
|
|
81
|
+
},
|
|
82
|
+
warning: {
|
|
83
|
+
1: "var(--color-semantic-warning-1)",
|
|
84
|
+
2: "var(--color-semantic-warning-2)",
|
|
85
|
+
3: "var(--color-semantic-warning-3)",
|
|
86
|
+
4: "var(--color-semantic-warning-4)",
|
|
87
|
+
5: "var(--color-semantic-warning-5)"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
white: "var(--color-white)"
|
|
91
|
+
},
|
|
92
|
+
fontFamily: {
|
|
93
|
+
sans: "var(--font-sans)",
|
|
94
|
+
mono: "var(--font-mono)"
|
|
95
|
+
},
|
|
96
|
+
fontSize: {
|
|
97
|
+
9: ["var(--text-9)", { lineHeight: "var(--leading-16)" }],
|
|
98
|
+
10: ["var(--text-10)", { lineHeight: "var(--leading-16)" }],
|
|
99
|
+
11: ["var(--text-11)", { lineHeight: "var(--leading-16)" }],
|
|
100
|
+
13: ["var(--text-13)", { lineHeight: "var(--leading-20)" }],
|
|
101
|
+
15: ["var(--text-15)", { lineHeight: "var(--leading-24)" }],
|
|
102
|
+
17: ["var(--text-17)", { lineHeight: "var(--leading-24)" }],
|
|
103
|
+
20: ["var(--text-20)", { lineHeight: "var(--leading-28)" }],
|
|
104
|
+
23: ["var(--text-23)", { lineHeight: "var(--leading-32)" }],
|
|
105
|
+
26: ["var(--text-26)", { lineHeight: "var(--leading-32)" }],
|
|
106
|
+
30: ["var(--text-30)", { lineHeight: "var(--leading-40)" }],
|
|
107
|
+
35: ["var(--text-35)", { lineHeight: "var(--leading-44)" }]
|
|
108
|
+
},
|
|
109
|
+
fontWeight: {
|
|
110
|
+
normal: "var(--font-weight-normal)",
|
|
111
|
+
medium: "var(--font-weight-medium)",
|
|
112
|
+
semibold: "var(--font-weight-semibold)",
|
|
113
|
+
bold: "var(--font-weight-bold)"
|
|
114
|
+
},
|
|
115
|
+
lineHeight: {
|
|
116
|
+
16: "var(--leading-16)",
|
|
117
|
+
20: "var(--leading-20)",
|
|
118
|
+
24: "var(--leading-24)",
|
|
119
|
+
28: "var(--leading-28)",
|
|
120
|
+
32: "var(--leading-32)",
|
|
121
|
+
40: "var(--leading-40)",
|
|
122
|
+
44: "var(--leading-44)",
|
|
123
|
+
r1p5: "var(--leading-r1p5)"
|
|
124
|
+
},
|
|
125
|
+
borderRadius: {
|
|
126
|
+
none: "var(--radius-0)",
|
|
127
|
+
sm: "var(--radius-2)",
|
|
128
|
+
3: "var(--radius-3)",
|
|
129
|
+
DEFAULT: "var(--radius-4)",
|
|
130
|
+
md: "var(--radius-6)",
|
|
131
|
+
lg: "var(--radius-8)",
|
|
132
|
+
xl: "var(--radius-12)",
|
|
133
|
+
"2xl": "var(--radius-16)",
|
|
134
|
+
"3xl": "var(--radius-20)",
|
|
135
|
+
"4xl": "var(--radius-24)",
|
|
136
|
+
full: "var(--radius-full)"
|
|
137
|
+
},
|
|
138
|
+
boxShadow: {
|
|
139
|
+
1: "var(--shadow-1)",
|
|
140
|
+
2: "var(--shadow-2)",
|
|
141
|
+
3: "var(--shadow-3)",
|
|
142
|
+
4: "var(--shadow-4)"
|
|
143
|
+
},
|
|
144
|
+
spacing: {
|
|
145
|
+
px: "var(--spacing-px)",
|
|
146
|
+
0: "var(--spacing-0)",
|
|
147
|
+
2: "var(--spacing-2)",
|
|
148
|
+
4: "var(--spacing-4)",
|
|
149
|
+
6: "var(--spacing-6)",
|
|
150
|
+
8: "var(--spacing-8)",
|
|
151
|
+
12: "var(--spacing-12)",
|
|
152
|
+
16: "var(--spacing-16)",
|
|
153
|
+
20: "var(--spacing-20)",
|
|
154
|
+
24: "var(--spacing-24)",
|
|
155
|
+
28: "var(--spacing-28)",
|
|
156
|
+
32: "var(--spacing-32)",
|
|
157
|
+
40: "var(--spacing-40)",
|
|
158
|
+
48: "var(--spacing-48)",
|
|
159
|
+
56: "var(--spacing-56)",
|
|
160
|
+
64: "var(--spacing-64)",
|
|
161
|
+
128: "var(--spacing-128)",
|
|
162
|
+
256: "var(--spacing-256)"
|
|
163
|
+
},
|
|
164
|
+
zIndex: {
|
|
165
|
+
0: "var(--z-0)",
|
|
166
|
+
1: "var(--z-1)",
|
|
167
|
+
2: "var(--z-2)",
|
|
168
|
+
3: "var(--z-3)",
|
|
169
|
+
4: "var(--z-4)",
|
|
170
|
+
5: "var(--z-5)",
|
|
171
|
+
999: "var(--z-999)",
|
|
172
|
+
9999: "var(--z-9999)"
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
export {
|
|
178
|
+
a as default
|
|
179
|
+
};
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Tailwind v4 theme bridge for acl-web-components
|
|
3
|
+
*
|
|
4
|
+
* Usage in your CSS entry point:
|
|
5
|
+
* @import "tailwindcss";
|
|
6
|
+
* @import "acl-web-components/tokens.css";
|
|
7
|
+
* @import "acl-web-components/tailwind-theme.css";
|
|
8
|
+
*
|
|
9
|
+
* `@theme inline` tells Tailwind to generate utility classes that reference
|
|
10
|
+
* these CSS variables at runtime rather than inlining static values.
|
|
11
|
+
* tokens.css must be imported first to provide the actual values.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@theme inline {
|
|
15
|
+
/* ── Colors ──────────────────────────────────────────────────────── */
|
|
16
|
+
--color-white: var(--color-white);
|
|
17
|
+
|
|
18
|
+
--color-gray-0: var(--color-gray-0);
|
|
19
|
+
--color-gray-1: var(--color-gray-1);
|
|
20
|
+
--color-gray-2: var(--color-gray-2);
|
|
21
|
+
--color-gray-3: var(--color-gray-3);
|
|
22
|
+
--color-gray-4: var(--color-gray-4);
|
|
23
|
+
--color-gray-5: var(--color-gray-5);
|
|
24
|
+
--color-gray-6: var(--color-gray-6);
|
|
25
|
+
--color-gray-7: var(--color-gray-7);
|
|
26
|
+
--color-gray-8: var(--color-gray-8);
|
|
27
|
+
--color-gray-9: var(--color-gray-9);
|
|
28
|
+
|
|
29
|
+
--color-primary-1: var(--color-primary-1);
|
|
30
|
+
--color-primary-2: var(--color-primary-2);
|
|
31
|
+
--color-primary-3: var(--color-primary-3);
|
|
32
|
+
--color-primary-4: var(--color-primary-4);
|
|
33
|
+
--color-primary-5: var(--color-primary-5);
|
|
34
|
+
|
|
35
|
+
--color-danger-1: var(--color-danger-1);
|
|
36
|
+
--color-danger-2: var(--color-danger-2);
|
|
37
|
+
--color-danger-3: var(--color-danger-3);
|
|
38
|
+
--color-danger-4: var(--color-danger-4);
|
|
39
|
+
--color-danger-5: var(--color-danger-5);
|
|
40
|
+
|
|
41
|
+
--color-success-1: var(--color-success-1);
|
|
42
|
+
--color-success-2: var(--color-success-2);
|
|
43
|
+
--color-success-3: var(--color-success-3);
|
|
44
|
+
--color-success-4: var(--color-success-4);
|
|
45
|
+
--color-success-5: var(--color-success-5);
|
|
46
|
+
|
|
47
|
+
--color-warning-1: var(--color-warning-1);
|
|
48
|
+
--color-warning-2: var(--color-warning-2);
|
|
49
|
+
--color-warning-3: var(--color-warning-3);
|
|
50
|
+
--color-warning-4: var(--color-warning-4);
|
|
51
|
+
--color-warning-5: var(--color-warning-5);
|
|
52
|
+
|
|
53
|
+
--color-semantic-gray-0: var(--color-semantic-gray-0);
|
|
54
|
+
--color-semantic-gray-1: var(--color-semantic-gray-1);
|
|
55
|
+
--color-semantic-gray-2: var(--color-semantic-gray-2);
|
|
56
|
+
--color-semantic-gray-3: var(--color-semantic-gray-3);
|
|
57
|
+
--color-semantic-gray-4: var(--color-semantic-gray-4);
|
|
58
|
+
--color-semantic-gray-5: var(--color-semantic-gray-5);
|
|
59
|
+
--color-semantic-gray-6: var(--color-semantic-gray-6);
|
|
60
|
+
--color-semantic-gray-7: var(--color-semantic-gray-7);
|
|
61
|
+
--color-semantic-gray-8: var(--color-semantic-gray-8);
|
|
62
|
+
--color-semantic-gray-9: var(--color-semantic-gray-9);
|
|
63
|
+
|
|
64
|
+
--color-semantic-primary-1: var(--color-semantic-primary-1);
|
|
65
|
+
--color-semantic-primary-2: var(--color-semantic-primary-2);
|
|
66
|
+
--color-semantic-primary-3: var(--color-semantic-primary-3);
|
|
67
|
+
--color-semantic-primary-4: var(--color-semantic-primary-4);
|
|
68
|
+
--color-semantic-primary-5: var(--color-semantic-primary-5);
|
|
69
|
+
|
|
70
|
+
--color-semantic-danger-1: var(--color-semantic-danger-1);
|
|
71
|
+
--color-semantic-danger-2: var(--color-semantic-danger-2);
|
|
72
|
+
--color-semantic-danger-3: var(--color-semantic-danger-3);
|
|
73
|
+
--color-semantic-danger-4: var(--color-semantic-danger-4);
|
|
74
|
+
--color-semantic-danger-5: var(--color-semantic-danger-5);
|
|
75
|
+
|
|
76
|
+
--color-semantic-success-1: var(--color-semantic-success-1);
|
|
77
|
+
--color-semantic-success-2: var(--color-semantic-success-2);
|
|
78
|
+
--color-semantic-success-3: var(--color-semantic-success-3);
|
|
79
|
+
--color-semantic-success-4: var(--color-semantic-success-4);
|
|
80
|
+
--color-semantic-success-5: var(--color-semantic-success-5);
|
|
81
|
+
|
|
82
|
+
--color-semantic-warning-1: var(--color-semantic-warning-1);
|
|
83
|
+
--color-semantic-warning-2: var(--color-semantic-warning-2);
|
|
84
|
+
--color-semantic-warning-3: var(--color-semantic-warning-3);
|
|
85
|
+
--color-semantic-warning-4: var(--color-semantic-warning-4);
|
|
86
|
+
--color-semantic-warning-5: var(--color-semantic-warning-5);
|
|
87
|
+
|
|
88
|
+
/* ── Font family ─────────────────────────────────────────────────── */
|
|
89
|
+
--font-sans: var(--font-sans);
|
|
90
|
+
--font-mono: var(--font-mono);
|
|
91
|
+
|
|
92
|
+
/* ── Font size (→ text-9, text-13 …) ───────────────────────────── */
|
|
93
|
+
--text-9: var(--text-9);
|
|
94
|
+
--text-10: var(--text-10);
|
|
95
|
+
--text-11: var(--text-11);
|
|
96
|
+
--text-13: var(--text-13);
|
|
97
|
+
--text-15: var(--text-15);
|
|
98
|
+
--text-17: var(--text-17);
|
|
99
|
+
--text-20: var(--text-20);
|
|
100
|
+
--text-23: var(--text-23);
|
|
101
|
+
--text-26: var(--text-26);
|
|
102
|
+
--text-30: var(--text-30);
|
|
103
|
+
--text-35: var(--text-35);
|
|
104
|
+
|
|
105
|
+
/* ── Font weight (→ font-normal, font-medium …) ──────────────────── */
|
|
106
|
+
--font-weight-normal: var(--font-weight-normal);
|
|
107
|
+
--font-weight-medium: var(--font-weight-medium);
|
|
108
|
+
--font-weight-semibold: var(--font-weight-semibold);
|
|
109
|
+
--font-weight-bold: var(--font-weight-bold);
|
|
110
|
+
|
|
111
|
+
/* ── Line height (→ leading-16, leading-20 …) ────────────────────── */
|
|
112
|
+
--leading-16: var(--leading-16);
|
|
113
|
+
--leading-20: var(--leading-20);
|
|
114
|
+
--leading-24: var(--leading-24);
|
|
115
|
+
--leading-28: var(--leading-28);
|
|
116
|
+
--leading-32: var(--leading-32);
|
|
117
|
+
--leading-40: var(--leading-40);
|
|
118
|
+
--leading-44: var(--leading-44);
|
|
119
|
+
--leading-r1p5: var(--leading-r1p5);
|
|
120
|
+
|
|
121
|
+
/* ── Border radius (→ rounded-sm, rounded, rounded-lg …) ─────────── */
|
|
122
|
+
--radius-none: var(--radius-0);
|
|
123
|
+
--radius-sm: var(--radius-2);
|
|
124
|
+
--radius-3: var(--radius-3);
|
|
125
|
+
--radius: var(--radius-4);
|
|
126
|
+
--radius-md: var(--radius-6);
|
|
127
|
+
--radius-lg: var(--radius-8);
|
|
128
|
+
--radius-xl: var(--radius-12);
|
|
129
|
+
--radius-2xl: var(--radius-16);
|
|
130
|
+
--radius-3xl: var(--radius-20);
|
|
131
|
+
--radius-4xl: var(--radius-24);
|
|
132
|
+
--radius-full: var(--radius-full);
|
|
133
|
+
|
|
134
|
+
/* ── Box shadow (→ shadow-1, shadow-2 …) ─────────────────────────── */
|
|
135
|
+
--shadow-1: var(--shadow-1);
|
|
136
|
+
--shadow-2: var(--shadow-2);
|
|
137
|
+
--shadow-3: var(--shadow-3);
|
|
138
|
+
--shadow-4: var(--shadow-4);
|
|
139
|
+
|
|
140
|
+
/* ── Spacing (→ p-4, m-8, gap-16 …) ─────────────────────────────── */
|
|
141
|
+
--spacing-px: var(--spacing-px);
|
|
142
|
+
--spacing-2: var(--spacing-2);
|
|
143
|
+
--spacing-4: var(--spacing-4);
|
|
144
|
+
--spacing-6: var(--spacing-6);
|
|
145
|
+
--spacing-8: var(--spacing-8);
|
|
146
|
+
--spacing-12: var(--spacing-12);
|
|
147
|
+
--spacing-16: var(--spacing-16);
|
|
148
|
+
--spacing-20: var(--spacing-20);
|
|
149
|
+
--spacing-24: var(--spacing-24);
|
|
150
|
+
--spacing-28: var(--spacing-28);
|
|
151
|
+
--spacing-32: var(--spacing-32);
|
|
152
|
+
--spacing-40: var(--spacing-40);
|
|
153
|
+
--spacing-48: var(--spacing-48);
|
|
154
|
+
--spacing-56: var(--spacing-56);
|
|
155
|
+
--spacing-64: var(--spacing-64);
|
|
156
|
+
--spacing-128: var(--spacing-128);
|
|
157
|
+
--spacing-256: var(--spacing-256);
|
|
158
|
+
|
|
159
|
+
/* ── Z-index (→ z-1, z-999 …) ───────────────────────────────────── */
|
|
160
|
+
--z-index-0: var(--z-0);
|
|
161
|
+
--z-index-1: var(--z-1);
|
|
162
|
+
--z-index-2: var(--z-2);
|
|
163
|
+
--z-index-3: var(--z-3);
|
|
164
|
+
--z-index-4: var(--z-4);
|
|
165
|
+
--z-index-5: var(--z-5);
|
|
166
|
+
--z-index-999: var(--z-999);
|
|
167
|
+
--z-index-9999: var(--z-9999);
|
|
168
|
+
}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
/* Anduin Design System — CSS Custom Properties (Design Tokens)
|
|
2
|
+
* Generated from web/css/src/tw/input.css
|
|
3
|
+
* Import this file once (e.g. in Storybook preview or app root) so that
|
|
4
|
+
* shadow-DOM components can resolve var(--color-*) references.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
/* ===================== Colors: Gray ===================== */
|
|
9
|
+
--color-gray-0: oklch(1 0 0);
|
|
10
|
+
--color-gray-1: oklch(0.9846 0.0017 247.84);
|
|
11
|
+
--color-gray-2: oklch(0.9515 0.0046 258.32);
|
|
12
|
+
--color-gray-3: oklch(0.9336 0.0058 264.53);
|
|
13
|
+
--color-gray-4: oklch(0.8618 0.0141 258.35);
|
|
14
|
+
--color-gray-5: oklch(0.7073 0.0268 263.28);
|
|
15
|
+
--color-gray-6: oklch(0.6528 0.0316 266.24);
|
|
16
|
+
--color-gray-7: oklch(0.5371 0.0337 264.24);
|
|
17
|
+
--color-gray-8: oklch(0.3544 0.0326 260.94);
|
|
18
|
+
--color-gray-9: oklch(0.2776 0.0341 255.81);
|
|
19
|
+
|
|
20
|
+
/* ===================== Colors: Danger ===================== */
|
|
21
|
+
--color-danger-1: oklch(0.9437 0.0174 17.47);
|
|
22
|
+
--color-danger-2: oklch(0.8643 0.0573 18.32);
|
|
23
|
+
--color-danger-3: oklch(0.712 0.1517 21.64);
|
|
24
|
+
--color-danger-4: oklch(0.5948 0.2165 26.91);
|
|
25
|
+
--color-danger-5: oklch(0.531 0.2147 28.91);
|
|
26
|
+
|
|
27
|
+
/* ===================== Colors: Primary ===================== */
|
|
28
|
+
--color-primary-1: oklch(0.9474 0.0256 221.57);
|
|
29
|
+
--color-primary-2: oklch(0.8652 0.066 236.86);
|
|
30
|
+
--color-primary-3: oklch(0.7219 0.1335 240.15);
|
|
31
|
+
--color-primary-4: oklch(0.5679 0.1784 254.76);
|
|
32
|
+
--color-primary-5: oklch(0.4682 0.1548 255.23);
|
|
33
|
+
|
|
34
|
+
/* ===================== Colors: Success ===================== */
|
|
35
|
+
--color-success-1: oklch(0.9276 0.0541 150.91);
|
|
36
|
+
--color-success-2: oklch(0.8592 0.1078 149.75);
|
|
37
|
+
--color-success-3: oklch(0.6953 0.1711 149.14);
|
|
38
|
+
--color-success-4: oklch(0.6149 0.1634 148.21);
|
|
39
|
+
--color-success-5: oklch(0.5075 0.136 146.46);
|
|
40
|
+
|
|
41
|
+
/* ===================== Colors: Warning ===================== */
|
|
42
|
+
--color-warning-1: oklch(0.9549 0.0496 88.08);
|
|
43
|
+
--color-warning-2: oklch(0.912 0.0811 83.56);
|
|
44
|
+
--color-warning-3: oklch(0.8282 0.1628 78.73);
|
|
45
|
+
--color-warning-4: oklch(0.7325 0.1512 75.97);
|
|
46
|
+
--color-warning-5: oklch(0.5329 0.1098 82);
|
|
47
|
+
|
|
48
|
+
/* ===================== Colors: Semantic Gray ===================== */
|
|
49
|
+
--color-semantic-gray-0: oklch(1 0 0);
|
|
50
|
+
--color-semantic-gray-1: oklch(0.9846 0.0017 247.84);
|
|
51
|
+
--color-semantic-gray-2: oklch(0.9515 0.0046 258.32);
|
|
52
|
+
--color-semantic-gray-3: oklch(0.9336 0.0058 264.53);
|
|
53
|
+
--color-semantic-gray-4: oklch(0.8618 0.0141 258.35);
|
|
54
|
+
--color-semantic-gray-5: oklch(0.7073 0.0268 263.28);
|
|
55
|
+
--color-semantic-gray-6: oklch(0.6528 0.0316 266.24);
|
|
56
|
+
--color-semantic-gray-7: oklch(0.5371 0.0337 264.24);
|
|
57
|
+
--color-semantic-gray-8: oklch(0.3544 0.0326 260.94);
|
|
58
|
+
--color-semantic-gray-9: oklch(0.2776 0.0341 255.81);
|
|
59
|
+
|
|
60
|
+
/* ===================== Colors: Semantic Danger ===================== */
|
|
61
|
+
--color-semantic-danger-1: oklch(0.9437 0.0174 17.47);
|
|
62
|
+
--color-semantic-danger-2: oklch(0.8643 0.0573 18.32);
|
|
63
|
+
--color-semantic-danger-3: oklch(0.712 0.1517 21.64);
|
|
64
|
+
--color-semantic-danger-4: oklch(0.5948 0.2165 26.91);
|
|
65
|
+
--color-semantic-danger-5: oklch(0.531 0.2147 28.91);
|
|
66
|
+
|
|
67
|
+
/* ===================== Colors: Semantic Primary ===================== */
|
|
68
|
+
--color-semantic-primary-1: oklch(0.9474 0.0256 221.57);
|
|
69
|
+
--color-semantic-primary-2: oklch(0.8652 0.066 236.86);
|
|
70
|
+
--color-semantic-primary-3: oklch(0.7219 0.1335 240.15);
|
|
71
|
+
--color-semantic-primary-4: oklch(0.5679 0.1784 254.76);
|
|
72
|
+
--color-semantic-primary-5: oklch(0.4682 0.1548 255.23);
|
|
73
|
+
|
|
74
|
+
/* ===================== Colors: Semantic Success ===================== */
|
|
75
|
+
--color-semantic-success-1: oklch(0.9276 0.0541 150.91);
|
|
76
|
+
--color-semantic-success-2: oklch(0.8592 0.1078 149.75);
|
|
77
|
+
--color-semantic-success-3: oklch(0.6953 0.1711 149.14);
|
|
78
|
+
--color-semantic-success-4: oklch(0.6149 0.1634 148.21);
|
|
79
|
+
--color-semantic-success-5: oklch(0.5075 0.136 146.46);
|
|
80
|
+
|
|
81
|
+
/* ===================== Colors: Semantic Warning ===================== */
|
|
82
|
+
--color-semantic-warning-1: oklch(0.9549 0.0496 88.08);
|
|
83
|
+
--color-semantic-warning-2: oklch(0.912 0.0811 83.56);
|
|
84
|
+
--color-semantic-warning-3: oklch(0.8282 0.1628 78.73);
|
|
85
|
+
--color-semantic-warning-4: oklch(0.7325 0.1512 75.97);
|
|
86
|
+
--color-semantic-warning-5: oklch(0.5329 0.1098 82);
|
|
87
|
+
|
|
88
|
+
/* ===================== Colors: Aliases ===================== */
|
|
89
|
+
--color-white: var(--color-gray-0);
|
|
90
|
+
|
|
91
|
+
/* ===================== Font Family ===================== */
|
|
92
|
+
--font-sans: system-ui, -apple-system, Roboto, Oxygen, Cantarell, Ubuntu, "Segoe UI", sans-serif;
|
|
93
|
+
--font-mono: monospace;
|
|
94
|
+
|
|
95
|
+
/* ===================== Font Size ===================== */
|
|
96
|
+
--text-9: 9px;
|
|
97
|
+
--text-10: 10px;
|
|
98
|
+
--text-11: 11px;
|
|
99
|
+
--text-13: 13px;
|
|
100
|
+
--text-15: 15px;
|
|
101
|
+
--text-17: 17px;
|
|
102
|
+
--text-20: 20px;
|
|
103
|
+
--text-23: 23px;
|
|
104
|
+
--text-26: 26px;
|
|
105
|
+
--text-30: 30px;
|
|
106
|
+
--text-35: 35px;
|
|
107
|
+
|
|
108
|
+
/* ===================== Font Weight ===================== */
|
|
109
|
+
--font-weight-normal: 400;
|
|
110
|
+
--font-weight-medium: 500;
|
|
111
|
+
--font-weight-semibold: 600;
|
|
112
|
+
--font-weight-bold: 700;
|
|
113
|
+
|
|
114
|
+
/* ===================== Line Height ===================== */
|
|
115
|
+
--leading-16: 16px;
|
|
116
|
+
--leading-20: 20px;
|
|
117
|
+
--leading-24: 24px;
|
|
118
|
+
--leading-28: 28px;
|
|
119
|
+
--leading-32: 32px;
|
|
120
|
+
--leading-40: 40px;
|
|
121
|
+
--leading-44: 44px;
|
|
122
|
+
--leading-r1p5: 1.5;
|
|
123
|
+
|
|
124
|
+
/* ===================== Border Radius ===================== */
|
|
125
|
+
--radius-0: 0;
|
|
126
|
+
--radius-2: 2px;
|
|
127
|
+
--radius-3: 3px;
|
|
128
|
+
--radius-4: 4px;
|
|
129
|
+
--radius-6: 6px;
|
|
130
|
+
--radius-8: 8px;
|
|
131
|
+
--radius-12: 12px;
|
|
132
|
+
--radius-16: 16px;
|
|
133
|
+
--radius-20: 20px;
|
|
134
|
+
--radius-24: 24px;
|
|
135
|
+
--radius-full: 9999px;
|
|
136
|
+
|
|
137
|
+
/* ===================== Box Shadow ===================== */
|
|
138
|
+
--shadow-1: 0px 1px 2px rgba(29, 41, 57, 0.07);
|
|
139
|
+
--shadow-2: 0px 1px 2px rgba(29, 41, 57, 0.04), 0px 2px 8px rgba(29, 41, 57, 0.08);
|
|
140
|
+
--shadow-3: 0px 2px 8px rgba(29, 41, 57, 0.08), 0px 8px 24px rgba(29, 41, 57, 0.12);
|
|
141
|
+
--shadow-4: 0px 4px 8px rgba(29, 41, 57, 0.08), 0px 16px 48px rgba(29, 41, 57, 0.16);
|
|
142
|
+
|
|
143
|
+
/* ===================== Spacing ===================== */
|
|
144
|
+
--spacing-px: 1px;
|
|
145
|
+
--spacing-0: 0;
|
|
146
|
+
--spacing-2: 2px;
|
|
147
|
+
--spacing-4: 4px;
|
|
148
|
+
--spacing-6: 6px;
|
|
149
|
+
--spacing-8: 8px;
|
|
150
|
+
--spacing-12: 12px;
|
|
151
|
+
--spacing-16: 16px;
|
|
152
|
+
--spacing-20: 20px;
|
|
153
|
+
--spacing-24: 24px;
|
|
154
|
+
--spacing-28: 28px;
|
|
155
|
+
--spacing-32: 32px;
|
|
156
|
+
--spacing-40: 40px;
|
|
157
|
+
--spacing-48: 48px;
|
|
158
|
+
--spacing-56: 56px;
|
|
159
|
+
--spacing-64: 64px;
|
|
160
|
+
--spacing-128: 128px;
|
|
161
|
+
--spacing-256: 256px;
|
|
162
|
+
|
|
163
|
+
/* ===================== Z-Index ===================== */
|
|
164
|
+
--z-0: 0;
|
|
165
|
+
--z-1: 1;
|
|
166
|
+
--z-2: 2;
|
|
167
|
+
--z-3: 3;
|
|
168
|
+
--z-4: 4;
|
|
169
|
+
--z-5: 5;
|
|
170
|
+
--z-999: 999;
|
|
171
|
+
--z-9999: 9999;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
body {
|
|
176
|
+
font-family: var(--font-sans);
|
|
177
|
+
-webkit-font-smoothing: antialiased;
|
|
178
|
+
-moz-osx-font-smoothing: grayscale;
|
|
179
|
+
font-size: var(--text-13);
|
|
180
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@duyluonganduin/acl-web-components",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/acl-web-components.cjs",
|
|
6
|
+
"module": "./dist/acl-web-components.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/acl-web-components.js",
|
|
11
|
+
"require": "./dist/acl-web-components.cjs"
|
|
12
|
+
},
|
|
13
|
+
"./tokens.css": {
|
|
14
|
+
"style": "./dist/tokens.css",
|
|
15
|
+
"default": "./dist/tokens.css"
|
|
16
|
+
},
|
|
17
|
+
"./tailwind-preset": {
|
|
18
|
+
"import": "./dist/tailwind-preset.js",
|
|
19
|
+
"require": "./dist/tailwind-preset.cjs"
|
|
20
|
+
},
|
|
21
|
+
"./tailwind-theme.css": {
|
|
22
|
+
"style": "./dist/tailwind-theme.css",
|
|
23
|
+
"default": "./dist/tailwind-theme.css"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"publishConfig": {
|
|
30
|
+
"access": "public"
|
|
31
|
+
},
|
|
32
|
+
"scripts": {
|
|
33
|
+
"prepare": "tsc -p tsconfig.build.json && vite build && cp src/styles/tokens.css dist/tokens.css && cp src/styles/tailwind-theme.css dist/tailwind-theme.css",
|
|
34
|
+
"build": "tsc -p tsconfig.build.json && vite build && cp src/styles/tokens.css dist/tokens.css && cp src/styles/tailwind-theme.css dist/tailwind-theme.css",
|
|
35
|
+
"storybook": "storybook dev -p 6006",
|
|
36
|
+
"build-storybook": "storybook build"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@storybook/addon-essentials": "^8.5.0",
|
|
40
|
+
"@storybook/blocks": "^8.5.0",
|
|
41
|
+
"@storybook/web-components-vite": "^8.5.0",
|
|
42
|
+
"lit": "^3.3.2",
|
|
43
|
+
"storybook": "^8.5.0",
|
|
44
|
+
"typescript": "^5.7.0",
|
|
45
|
+
"vite": "^6.1.0",
|
|
46
|
+
"vite-plugin-dts": "^4.4.0"
|
|
47
|
+
}
|
|
48
|
+
}
|