@westayltd/design-tokens 0.1.0 → 0.2.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.
Files changed (10) hide show
  1. package/colors.json +160 -50
  2. package/dist/index.cjs +159 -58
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +148 -182
  5. package/dist/index.d.ts +148 -182
  6. package/dist/index.js +158 -53
  7. package/dist/index.js.map +1 -1
  8. package/package.json +10 -32
  9. package/tsconfig.json +7 -6
  10. package/README.md +0 -108
package/dist/index.d.cts CHANGED
@@ -1,198 +1,164 @@
1
- var light = {
2
- brand: {
3
- crimson: {
4
- "100": "#FDECEC",
5
- "300": "#F19999",
6
- "500": "#E53935",
7
- "700": "#B11212",
8
- "900": "#7A0C0C"
9
- },
10
- burgundy: {
11
- "100": "#F5E6EC",
12
- "500": "#8C1D40",
13
- "900": "#4A0F24"
14
- },
15
- royal: {
16
- "100": "#E3F2FD",
17
- "500": "#0D47A1",
18
- "900": "#0B2C5D"
19
- },
20
- mint: {
21
- "100": "#E0F4EF",
22
- "500": "#2E7D6B",
23
- "900": "#0F4D3C"
24
- }
25
- },
26
- surface: {
27
- bg: "#FFFFFF",
28
- subtle: "#F7F7F7",
29
- raised: "#FFFFFF",
30
- border: "#E5E7EB"
31
- },
32
- text: {
33
- primary: "#111827",
34
- secondary: "#4B5563",
35
- muted: "#9CA3AF",
36
- inverse: "#FFFFFF"
37
- },
38
- feedback: {
39
- success: "#2E7D32",
40
- error: "#C62828",
41
- warning: "#F9A825",
42
- info: "#1565C0"
43
- }
44
- };
45
- var dark = {
46
- brand: {
47
- crimson: {
48
- "500": "#E53935",
49
- "700": "#F19999",
50
- "900": "#FDECEC"
51
- }
52
- },
53
- surface: {
54
- bg: "#0B0B0C",
55
- subtle: "#161618",
56
- raised: "#1F1F22",
57
- border: "#2E2E33"
58
- },
59
- text: {
60
- primary: "#F9FAFB",
61
- secondary: "#D1D5DB",
62
- muted: "#9CA3AF",
63
- inverse: "#111827"
64
- },
65
- feedback: {
66
- success: "#81C784",
67
- error: "#EF9A9A",
68
- warning: "#FFE082",
69
- info: "#90CAF9"
70
- }
71
- };
72
- var colors = {
73
- light: light,
74
- dark: dark
75
- };
76
-
77
- var spacing = {
78
- "0": "0px",
79
- "1": "4px",
80
- "2": "8px",
81
- "3": "12px",
82
- "4": "16px",
83
- "5": "20px",
84
- "6": "24px",
85
- "8": "32px",
86
- "10": "40px",
87
- "12": "48px"
88
- };
89
-
90
- var fontFamily = {
91
- sans: [
92
- "Helvetica",
93
- "Arial",
94
- "sans-serif"
95
- ]
96
- };
97
- var fontSize = {
98
- xs: "12px",
99
- sm: "14px",
100
- base: "16px",
101
- lg: "18px",
102
- xl: "20px",
103
- "2xl": "24px",
104
- "3xl": "30px"
105
- };
106
- var fontWeight = {
107
- regular: "400",
108
- medium: "500",
109
- semibold: "600",
110
- bold: "700"
111
- };
112
- var lineHeight = {
113
- tight: "1.2",
114
- normal: "1.5",
115
- relaxed: "1.7"
116
- };
117
- var typography = {
118
- fontFamily: fontFamily,
119
- fontSize: fontSize,
120
- fontWeight: fontWeight,
121
- lineHeight: lineHeight
122
- };
123
-
124
- var none = "0px";
125
- var sm = "6px";
126
- var md = "10px";
127
- var lg = "14px";
128
- var xl = "20px";
129
- var full = "9999px";
130
- var radius = {
131
- none: none,
132
- sm: sm,
133
- md: md,
134
- lg: lg,
135
- xl: xl,
136
- full: full
137
- };
138
-
139
1
  declare const tokens: {
140
- readonly colors: {
2
+ colors: {
141
3
  light: {
142
4
  brand: {
143
5
  crimson: {
144
- "900": string;
6
+ "800": string;
145
7
  "700": string;
8
+ "600": string;
146
9
  "500": string;
10
+ "400": string;
147
11
  "300": string;
12
+ "200": string;
148
13
  "100": string;
14
+ transparent: {
15
+ "800": string;
16
+ "700": string;
17
+ "600": string;
18
+ "500": string;
19
+ "400": string;
20
+ "300": string;
21
+ "200": string;
22
+ "100": string;
23
+ };
149
24
  };
150
25
  burgundy: {
151
- "900": string;
26
+ "800": string;
27
+ "700": string;
28
+ "600": string;
29
+ "500": string;
30
+ "400": string;
31
+ "300": string;
32
+ "200": string;
33
+ "100": string;
34
+ };
35
+ royals: {
36
+ "800": string;
37
+ "700": string;
38
+ "600": string;
152
39
  "500": string;
40
+ "400": string;
41
+ "300": string;
42
+ "200": string;
153
43
  "100": string;
154
44
  };
155
- royal: {
156
- "900": string;
45
+ oldMoney: {
46
+ "800": string;
47
+ "700": string;
48
+ "600": string;
157
49
  "500": string;
50
+ "400": string;
51
+ "300": string;
52
+ "200": string;
158
53
  "100": string;
159
54
  };
160
- mint: {
161
- "900": string;
55
+ driftwood: {
56
+ "800": string;
57
+ "700": string;
58
+ "600": string;
162
59
  "500": string;
60
+ "400": string;
61
+ "300": string;
62
+ "200": string;
63
+ "100": string;
64
+ };
65
+ oceanic: {
66
+ "800": string;
67
+ "700": string;
68
+ "600": string;
69
+ "500": string;
70
+ "400": string;
71
+ "300": string;
72
+ "200": string;
163
73
  "100": string;
164
74
  };
165
75
  };
166
- surface: {
167
- bg: string;
168
- subtle: string;
169
- raised: string;
170
- border: string;
171
- };
172
- text: {
173
- primary: string;
174
- secondary: string;
175
- muted: string;
176
- inverse: string;
76
+ neutral: {
77
+ monochrome: {
78
+ "800": string;
79
+ "700": string;
80
+ "600": string;
81
+ "500": string;
82
+ "400": string;
83
+ "300": string;
84
+ "200": string;
85
+ "100": string;
86
+ transparent: {
87
+ "800": string;
88
+ "700": string;
89
+ "600": string;
90
+ "500": string;
91
+ "400": string;
92
+ "300": string;
93
+ "200": string;
94
+ "100": string;
95
+ };
96
+ };
97
+ greyscale: {
98
+ "800": string;
99
+ "700": string;
100
+ "600": string;
101
+ "500": string;
102
+ "400": string;
103
+ "300": string;
104
+ "200": string;
105
+ "100": string;
106
+ transparent: {
107
+ "800": string;
108
+ "700": string;
109
+ "600": string;
110
+ "500": string;
111
+ "400": string;
112
+ "300": string;
113
+ "200": string;
114
+ "100": string;
115
+ };
116
+ };
177
117
  };
178
118
  feedback: {
179
- success: string;
180
- error: string;
181
- warning: string;
182
- info: string;
183
- };
184
- };
185
- dark: {
186
- brand: {
187
- crimson: {
188
- "900": string;
119
+ success: {
120
+ "800": string;
189
121
  "700": string;
122
+ "600": string;
190
123
  "500": string;
124
+ "400": string;
125
+ "300": string;
126
+ "200": string;
127
+ "100": string;
128
+ };
129
+ error: {
130
+ "800": string;
131
+ "700": string;
132
+ "600": string;
133
+ "500": string;
134
+ "400": string;
135
+ "300": string;
136
+ "200": string;
137
+ "100": string;
138
+ };
139
+ warning: {
140
+ "800": string;
141
+ "700": string;
142
+ "600": string;
143
+ "500": string;
144
+ "400": string;
145
+ "300": string;
146
+ "200": string;
147
+ "100": string;
148
+ };
149
+ };
150
+ gradient: {
151
+ membership: {
152
+ access: string[];
153
+ elite: string[];
154
+ prestige: string[];
155
+ prive: string[];
191
156
  };
192
157
  };
158
+ };
159
+ dark: {
193
160
  surface: {
194
161
  bg: string;
195
- subtle: string;
196
162
  raised: string;
197
163
  border: string;
198
164
  };
@@ -200,17 +166,22 @@ declare const tokens: {
200
166
  primary: string;
201
167
  secondary: string;
202
168
  muted: string;
203
- inverse: string;
204
169
  };
205
- feedback: {
206
- success: string;
207
- error: string;
208
- warning: string;
209
- info: string;
170
+ };
171
+ text: {
172
+ body: {
173
+ "800": string;
174
+ "700": string;
175
+ "600": string;
176
+ "500": string;
177
+ "400": string;
178
+ "300": string;
179
+ "200": string;
180
+ "100": string;
210
181
  };
211
182
  };
212
183
  };
213
- readonly spacing: {
184
+ spacing: {
214
185
  "0": string;
215
186
  "1": string;
216
187
  "2": string;
@@ -222,7 +193,7 @@ declare const tokens: {
222
193
  "10": string;
223
194
  "12": string;
224
195
  };
225
- readonly typography: {
196
+ typography: {
226
197
  fontFamily: {
227
198
  sans: string[];
228
199
  };
@@ -247,7 +218,7 @@ declare const tokens: {
247
218
  relaxed: string;
248
219
  };
249
220
  };
250
- readonly radius: {
221
+ radius: {
251
222
  none: string;
252
223
  sm: string;
253
224
  md: string;
@@ -257,10 +228,5 @@ declare const tokens: {
257
228
  };
258
229
  };
259
230
  type ThemeMode = "light" | "dark";
260
- type Colors = typeof colors;
261
- type Spacing = typeof spacing;
262
- type Typography = typeof typography;
263
- type Radius = typeof radius;
264
- type Tokens = typeof tokens;
265
231
 
266
- export { type Colors, type Radius, type Spacing, type ThemeMode, type Tokens, type Typography, colors, radius, spacing, tokens, typography };
232
+ export { type ThemeMode, tokens };