@x-green/components 0.1.0 → 0.3.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.
Files changed (13) hide show
  1. package/README.md +25 -37
  2. package/dist/components/button.d.ts +2 -1
  3. package/dist/components/index.d.ts +0 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.ts +0 -1
  6. package/dist/index.js +1 -416
  7. package/dist/theme.css +216 -0
  8. package/package.json +11 -4
  9. package/dist/tokens/index.d.ts +0 -8
  10. package/dist/tokens/primitives/colors.d.ts +0 -234
  11. package/dist/tokens/primitives/typography.d.ts +0 -32
  12. package/dist/tokens/semantic/colors.d.ts +0 -201
  13. package/dist/tokens/semantic/typography.d.ts +0 -100
package/dist/tokens/semantic/colors.d.ts DELETED
@@ -1,201 +0,0 @@
1
- export declare const semanticColors: {
2
- readonly primary: "#008149";
3
- readonly 'primary-hover': "#006137";
4
- readonly outline: "#F0F5FB";
5
- readonly error: "#BB3030";
6
- readonly 'error-hover': "#8C2424";
7
- };
8
- export declare const semanticColorCssVariables: Record<string, string>;
9
- export declare const button: {
10
- readonly primary: {
11
- readonly default: {
12
- readonly background: "#008149";
13
- readonly border: "#008149";
14
- };
15
- readonly hover: {
16
- readonly background: "#006137";
17
- readonly border: "#006137";
18
- };
19
- readonly focus: {
20
- readonly background: "#008149";
21
- readonly border: "#008149";
22
- };
23
- readonly disabled: {
24
- readonly background: "#E5EAF1";
25
- readonly border: "#848A98";
26
- readonly text: "#848A98";
27
- };
28
- };
29
- readonly outline: {
30
- readonly default: {
31
- readonly background: "#F0F5FB";
32
- readonly border: "#008149";
33
- };
34
- readonly hover: {
35
- readonly background: "#F0F5FB";
36
- readonly border: "#006137";
37
- };
38
- readonly focus: {
39
- readonly background: "#F0F5FB";
40
- readonly border: "#008149";
41
- };
42
- readonly disabled: {
43
- readonly background: "#E5EAF1";
44
- readonly border: "#848A98";
45
- readonly text: "#848A98";
46
- };
47
- };
48
- readonly transparent: {
49
- readonly default: {
50
- readonly background: "transparent";
51
- readonly border: "transparent";
52
- readonly text: "#008149";
53
- };
54
- readonly hover: {
55
- readonly background: "transparent";
56
- readonly border: "transparent";
57
- readonly text: "#006137";
58
- };
59
- readonly focus: {
60
- readonly background: "transparent";
61
- readonly border: "transparent";
62
- readonly text: "#008149";
63
- };
64
- readonly disabled: {
65
- readonly background: "transparent";
66
- readonly border: "transparent";
67
- readonly text: "#848A98";
68
- };
69
- };
70
- readonly error: {
71
- readonly default: {
72
- readonly background: "#BB3030";
73
- readonly border: "#BB3030";
74
- };
75
- readonly hover: {
76
- readonly background: "#8C2424";
77
- readonly border: "#8C2424";
78
- };
79
- readonly focus: {
80
- readonly background: "#BB3030";
81
- readonly border: "#BB3030";
82
- };
83
- readonly disabled: {
84
- readonly background: "#E5EAF1";
85
- readonly border: "#848A98";
86
- readonly text: "#848A98";
87
- };
88
- };
89
- readonly 'outline-error': {
90
- readonly default: {
91
- readonly background: "#F0F5FB";
92
- readonly border: "#BB3030";
93
- readonly text: "#BB3030";
94
- };
95
- readonly hover: {
96
- readonly background: "#F0F5FB";
97
- readonly border: "#8C2424";
98
- readonly text: "#8C2424";
99
- };
100
- readonly focus: {
101
- readonly background: "#F0F5FB";
102
- readonly border: "#BB3030";
103
- readonly text: "#BB3030";
104
- };
105
- readonly disabled: {
106
- readonly background: "#E5EAF1";
107
- readonly border: "#848A98";
108
- readonly text: "#848A98";
109
- };
110
- };
111
- readonly 'transparent-error': {
112
- readonly default: {
113
- readonly background: "transparent";
114
- readonly border: "transparent";
115
- readonly text: "#BB3030";
116
- };
117
- readonly hover: {
118
- readonly background: "transparent";
119
- readonly border: "transparent";
120
- readonly text: "#8C2424";
121
- };
122
- readonly focus: {
123
- readonly background: "transparent";
124
- readonly border: "transparent";
125
- readonly text: "#BB3030";
126
- };
127
- readonly disabled: {
128
- readonly background: "transparent";
129
- readonly border: "transparent";
130
- readonly text: "#848A98";
131
- };
132
- };
133
- readonly neutral: {
134
- readonly default: {
135
- readonly background: "#F0F5FB";
136
- readonly border: "#C5CAD3";
137
- readonly text: "#35373D";
138
- };
139
- readonly hover: {
140
- readonly background: "#E5EAF1";
141
- readonly border: "#AFB5C0";
142
- readonly text: "#35373D";
143
- };
144
- readonly focus: {
145
- readonly background: "#F0F5FB";
146
- readonly border: "#C5CAD3";
147
- readonly text: "#35373D";
148
- };
149
- readonly disabled: {
150
- readonly background: "#E5EAF1";
151
- readonly border: "#848A98";
152
- readonly text: "#848A98";
153
- };
154
- };
155
- readonly 'outline-neutral': {
156
- readonly default: {
157
- readonly background: "#F0F5FB";
158
- readonly border: "#C5CAD3";
159
- readonly text: "#35373D";
160
- };
161
- readonly hover: {
162
- readonly background: "#F0F5FB";
163
- readonly border: "#AFB5C0";
164
- readonly text: "#35373D";
165
- };
166
- readonly focus: {
167
- readonly background: "#F0F5FB";
168
- readonly border: "#C5CAD3";
169
- readonly text: "#35373D";
170
- };
171
- readonly disabled: {
172
- readonly background: "#E5EAF1";
173
- readonly border: "#848A98";
174
- readonly text: "#848A98";
175
- };
176
- };
177
- readonly 'transparent-neutral': {
178
- readonly default: {
179
- readonly background: "transparent";
180
- readonly border: "transparent";
181
- readonly text: "#35373D";
182
- };
183
- readonly hover: {
184
- readonly background: "transparent";
185
- readonly border: "transparent";
186
- readonly text: "#1A1C1E";
187
- };
188
- readonly focus: {
189
- readonly background: "transparent";
190
- readonly border: "transparent";
191
- readonly text: "#35373D";
192
- };
193
- readonly disabled: {
194
- readonly background: "transparent";
195
- readonly border: "transparent";
196
- readonly text: "#848A98";
197
- };
198
- };
199
- };
200
- export type SemanticColors = typeof semanticColors;
201
- export type ButtonTokens = typeof button;
package/dist/tokens/semantic/typography.d.ts DELETED
@@ -1,100 +0,0 @@
1
- export declare const typography: {
2
- readonly 'heading-h1': {
3
- readonly fontSize: "60px";
4
- readonly lineHeight: "72px";
5
- readonly fontWeight: 600;
6
- readonly fontFamily: "var(--default-font-family)";
7
- };
8
- readonly 'heading-h2': {
9
- readonly fontSize: "48px";
10
- readonly lineHeight: "56px";
11
- readonly fontWeight: 600;
12
- readonly fontFamily: "var(--default-font-family)";
13
- };
14
- readonly 'heading-h3': {
15
- readonly fontSize: "40px";
16
- readonly lineHeight: "48px";
17
- readonly fontWeight: 600;
18
- readonly fontFamily: "var(--default-font-family)";
19
- };
20
- readonly 'heading-h4': {
21
- readonly fontSize: "32px";
22
- readonly lineHeight: "40px";
23
- readonly fontWeight: 600;
24
- readonly fontFamily: "var(--default-font-family)";
25
- };
26
- readonly 'heading-h5': {
27
- readonly fontSize: "24px";
28
- readonly lineHeight: "28px";
29
- readonly fontWeight: 600;
30
- readonly fontFamily: "var(--default-font-family)";
31
- };
32
- readonly 'heading-h6': {
33
- readonly fontSize: "20px";
34
- readonly lineHeight: "24px";
35
- readonly fontWeight: 600;
36
- readonly fontFamily: "var(--default-font-family)";
37
- };
38
- readonly 'body-sm': {
39
- readonly fontSize: "14px";
40
- readonly lineHeight: "16px";
41
- readonly fontFamily: "var(--default-font-family)";
42
- readonly fontWeight: 400;
43
- };
44
- readonly 'body-sm-semibold': {
45
- readonly fontWeight: 600;
46
- readonly fontSize: "14px";
47
- readonly lineHeight: "16px";
48
- readonly fontFamily: "var(--default-font-family)";
49
- };
50
- readonly 'body-sm-link': {
51
- readonly fontSize: "14px";
52
- readonly lineHeight: "16px";
53
- readonly fontFamily: "var(--default-font-family)";
54
- readonly fontWeight: 400;
55
- };
56
- readonly 'body-md': {
57
- readonly fontSize: "16px";
58
- readonly lineHeight: "20px";
59
- readonly fontFamily: "var(--default-font-family)";
60
- readonly fontWeight: 400;
61
- };
62
- readonly 'body-md-link': {
63
- readonly fontSize: "16px";
64
- readonly lineHeight: "20px";
65
- readonly fontFamily: "var(--default-font-family)";
66
- readonly fontWeight: 400;
67
- };
68
- readonly 'body-md-semibold': {
69
- readonly fontWeight: 600;
70
- readonly fontSize: "16px";
71
- readonly lineHeight: "20px";
72
- readonly fontFamily: "var(--default-font-family)";
73
- };
74
- readonly 'body-lg': {
75
- readonly fontSize: "20px";
76
- readonly lineHeight: "24px";
77
- readonly fontFamily: "var(--default-font-family)";
78
- readonly fontWeight: 400;
79
- };
80
- readonly 'body-lg-link': {
81
- readonly fontSize: "20px";
82
- readonly lineHeight: "24px";
83
- readonly fontFamily: "var(--default-font-family)";
84
- readonly fontWeight: 400;
85
- };
86
- readonly 'body-lg-semibold': {
87
- readonly fontWeight: 600;
88
- readonly fontSize: "20px";
89
- readonly lineHeight: "24px";
90
- readonly fontFamily: "var(--default-font-family)";
91
- };
92
- readonly caption: {
93
- readonly fontSize: "12px";
94
- readonly lineHeight: "16px";
95
- readonly fontFamily: "var(--default-font-family)";
96
- readonly fontWeight: 400;
97
- };
98
- };
99
- export type TypographyTokenName = keyof typeof typography;
100
- export type TypographyToken = (typeof typography)[TypographyTokenName];