@westayltd/design-tokens 0.2.2 → 0.3.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 (12) hide show
  1. package/colors.json +166 -171
  2. package/dist/index.cjs +332 -171
  3. package/dist/index.d.cts +512 -176
  4. package/dist/index.d.ts +512 -176
  5. package/dist/index.js +332 -171
  6. package/grid.json +16 -0
  7. package/iconSizes.json +18 -0
  8. package/package.json +5 -2
  9. package/radius.json +8 -3
  10. package/shadows.json +28 -0
  11. package/spacing.json +17 -1
  12. package/typography.json +43 -2
package/colors.json CHANGED
@@ -1,171 +1,179 @@
1
1
  {
2
- "light": {
3
- "brand": {
4
- "crimson": {
5
- "800": "#BB2F2A",
6
- "700": "#EA3B34",
7
- "600": "#EE5656",
8
- "500": "#F17878",
9
- "400": "#F59A9A",
10
- "300": "#FDECEC",
11
- "200": "#FCDDDD",
12
- "100": "#FDEEEE",
13
-
14
- "transparent": {
15
- "800": "rgba(187, 47, 42, 0.1)",
16
- "700": "rgba(234, 59, 52, 0.1)",
17
- "600": "rgba(238, 86, 86, 0.1)",
18
- "500": "rgba(241, 120, 120, 0.1)",
19
- "400": "rgba(245, 154, 154, 0.1)",
20
- "300": "rgba(253, 236, 236, 0.1)",
21
- "200": "rgba(252, 221, 221, 0.1)",
22
- "100": "rgba(253, 238, 238, 0.1)"
23
- }
24
- },
25
- "burgundy": {
26
- "800": "#A12C3D",
27
- "700": "#B35563",
28
- "600": "#C67E88",
29
- "500": "#D8A6AE",
30
- "400": "#E1BBC1",
31
- "300": "#EBCFD3",
32
- "200": "#F4E4E6",
33
- "100": "#FDF8F9"
34
- },
35
- "royals": {
36
- "800": "#0A223A",
37
- "700": "#06315C",
38
- "600": "#013C76",
39
- "500": "#004484",
40
- "400": "#0054A4",
41
- "300": "#005FBA",
42
- "200": "#0071DF",
43
- "100": "#46A2FF"
44
- },
45
- "oldMoney": {
46
- "800": "#1E423D",
47
- "700": "#285952",
48
- "600": "#2E7569",
49
- "500": "#448E80",
50
- "400": "#6CADA1",
51
- "300": "#A5D6CD",
52
- "200": "#C5FBF1",
53
- "100": "#DDFFF9"
54
- },
55
- "driftwood": {
56
- "800": "#A47C46",
57
- "700": "#C2914E",
58
- "600": "#DEAA62",
59
- "500": "#DFB67F",
60
- "400": "#FDCF93",
61
- "300": "#FFD9A6",
62
- "200": "#FFE6C3",
63
- "100": "#FFEFDA"
64
- },
65
- "oceanic": {
66
- "800": "#01D1C1",
67
- "700": "#1AD8C9",
68
- "600": "#37EDDF",
69
- "500": "#61FFF3",
70
- "400": "#93FFF7",
71
- "300": "#BEFFFA",
72
- "200": "#DBFFFC",
73
- "100": "#EFFFFE"
74
- }
2
+ "colors": {
3
+ "background": {
4
+ "DEFAULT": "#FFFFFF",
5
+ "dark": "#161616",
6
+ "frosted": "rgba(255, 255, 255, 0.95)",
7
+ "frostedDark": "rgba(22, 22, 22, 0.95)"
75
8
  },
76
-
77
- "neutral": {
78
- "monochrome": {
79
- "800": "#000000",
80
- "700": "#161616",
81
- "600": "#1C1C1C",
82
- "500": "#262626",
83
- "400": "#353434",
84
- "300": "#4B4A4A",
85
- "200": "#686868",
86
- "100": "#919191",
87
-
88
- "transparent": {
89
- "800": "rgba(0, 0, 0, 0.1)",
90
- "700": "rgba(22, 22, 22, 0.1)",
91
- "600": "rgba(28, 28, 28, 0.1)",
92
- "500": "rgba(38, 38, 38, 0.1)",
93
- "400": "rgba(53, 52, 52, 0.1)",
94
- "300": "rgba(75, 74, 74, 0.1)",
95
- "200": "rgba(104, 104, 104, 0.1)",
96
- "100": "rgba(145, 145, 145, 0.1)"
97
- }
98
- },
99
- "greyscale": {
100
- "800": "#CCCCCC",
101
- "700": "#D6D6D6",
102
- "600": "#E0E0E0",
103
- "500": "#EBEBEB",
104
- "400": "#EFEFF3",
105
- "300": "#EFEFF3",
106
- "200": "#FAFAFC",
107
- "100": "#FFFFFF",
108
-
109
- "transparent": {
110
- "800": "rgba(204, 204, 204, 0.1)",
111
- "700": "rgba(214, 214, 214, 0.1)",
112
- "600": "rgba(224, 224, 224, 0.1)",
113
- "500": "rgba(235, 235, 235, 0.1)",
114
- "400": "rgba(239, 239, 243, 0.1)",
115
- "300": "rgba(239, 239, 243, 0.1)",
116
- "200": "rgba(250, 250, 252, 0.1)",
117
- "100": "rgba(255, 255, 255, 0.1)"
118
- }
119
- }
9
+ "primary": {
10
+ "1300": "#121212",
11
+ "1200": "#1A1A1A",
12
+ "1100": "#292929",
13
+ "1000": "#3A3A3A",
14
+ "900": "#4D4D4D",
15
+ "800": "#636363",
16
+ "700": "#757575",
17
+ "600": "#919191",
18
+ "500": "#A9A9A9",
19
+ "400": "#C0C0C0",
20
+ "300": "#DCDCDC",
21
+ "250": "#E5E5E5",
22
+ "200": "#F0F0F4",
23
+ "150": "#F5F5F9",
24
+ "100": "#FAFAFA",
25
+ "50": "#FFFFFF"
120
26
  },
121
-
122
- "feedback": {
123
- "success": {
124
- "800": "#0F5132",
125
- "700": "#146C43",
126
- "600": "#198754",
127
- "500": "#28A745",
128
- "400": "#5CB85C",
129
- "300": "#8FD19E",
130
- "200": "#C7E9D5",
131
- "100": "#E9F7EF"
132
- },
133
- "error": {
134
- "800": "#7E1C1C",
135
- "700": "#9C2F2F",
136
- "600": "#C24040",
137
- "500": "#D96363",
138
- "400": "#E99696",
139
- "300": "#F2BDBD",
140
- "200": "#F9DADA",
141
- "100": "#FDF2F2"
27
+ "secondary": {
28
+ "950": "#450A0E",
29
+ "900": "#7E1E24",
30
+ "800": "#981C24",
31
+ "700": "#B81D27",
32
+ "600": "#DB2733",
33
+ "500": "#EE444F",
34
+ "400": "#F7727B",
35
+ "300": "#FCA5AB",
36
+ "200": "#FECACD",
37
+ "100": "#FEE2E4"
38
+ },
39
+ "accent": {
40
+ "800": "#633F30",
41
+ "700": "#754B33",
42
+ "600": "#92623C",
43
+ "500": "#AA7C48",
44
+ "400": "#BD9560",
45
+ "300": "#C9AB7B",
46
+ "200": "#DDCCAB",
47
+ "100": "#EDE5D4",
48
+ "50": "#F8F5EE"
49
+ },
50
+ "negative": {
51
+ "800": "#7E1C1C",
52
+ "700": "#9C2F2F",
53
+ "600": "#C24040",
54
+ "500": "#D96363",
55
+ "400": "#E99696",
56
+ "300": "#F2BDBD",
57
+ "200": "#F9DADA",
58
+ "100": "#FDF2F2"
59
+ },
60
+ "positive": {
61
+ "800": "#0F5132",
62
+ "700": "#146C43",
63
+ "600": "#198754",
64
+ "500": "#28A745",
65
+ "400": "#5CB85C",
66
+ "300": "#8FD19E",
67
+ "200": "#C7E9D5",
68
+ "100": "#E9F7EF"
69
+ },
70
+ "warning": {
71
+ "800": "#985108",
72
+ "700": "#BB6902",
73
+ "600": "#E29400",
74
+ "500": "#FFC107",
75
+ "400": "#FFDF1B",
76
+ "300": "#FFEE46",
77
+ "200": "#FFF885",
78
+ "100": "#FFFBC5"
79
+ },
80
+ "rating": {
81
+ "800": "#80462C",
82
+ "700": "#9F572F",
83
+ "600": "#C06E36",
84
+ "500": "#CE8441",
85
+ "400": "#D69D61",
86
+ "300": "#DFB67F",
87
+ "200": "#EED9BA",
88
+ "100": "#F7EEDD"
89
+ },
90
+ "link": {
91
+ "800": "#255965",
92
+ "700": "#246B7A",
93
+ "600": "#258495",
94
+ "500": "#2CAFBE",
95
+ "400": "#45C0CB",
96
+ "300": "#80D9E0",
97
+ "200": "#B4E9ED",
98
+ "100": "#D7F4F6"
99
+ },
100
+ "paleSteel": {
101
+ "800": "#202236",
102
+ "700": "#383950",
103
+ "600": "#4C4E62",
104
+ "500": "#6C6C7F",
105
+ "400": "#9D9DAE",
106
+ "300": "#D1D2DB",
107
+ "200": "#E8E8ED",
108
+ "100": "#F9F9FB"
109
+ },
110
+ "label": {
111
+ "800": "#204CAD",
112
+ "700": "#1F5ED6",
113
+ "600": "#2774E9",
114
+ "500": "#3D92F4",
115
+ "400": "#62B1F8",
116
+ "300": "#94CDFC",
117
+ "200": "#C0E0FD",
118
+ "100": "#DBEDFE",
119
+ "50": "#EFF7FF"
120
+ },
121
+ "loyalty": {
122
+ "900": "#482B54",
123
+ "800": "#5F3672",
124
+ "700": "#72408B",
125
+ "600": "#8A51A8",
126
+ "500": "#A670C5",
127
+ "400": "#C299D9",
128
+ "300": "#D8BFE8",
129
+ "200": "#E8DBF3",
130
+ "100": "#F4EEF9",
131
+ "50": "#FAF7FC"
132
+ },
133
+ "surface-dark": "#9D9DAE",
134
+ "surface-medium": "#D1D2DB",
135
+ "surface-soft": "#F0F0F4",
136
+ "surface-softer": "#F0F0F4",
137
+ "page-background": "#FFFFFF",
138
+ "transparency": {
139
+ "black": {
140
+ "90": "rgba(26, 26, 26, 0.90)",
141
+ "80": "rgba(26, 26, 26, 0.80)",
142
+ "65": "rgba(26, 26, 26, 0.65)",
143
+ "50": "rgba(26, 26, 26, 0.50)",
144
+ "35": "rgba(26, 26, 26, 0.35)",
145
+ "25": "rgba(26, 26, 26, 0.25)",
146
+ "20": "rgba(26, 26, 26, 0.20)",
147
+ "15": "rgba(26, 26, 26, 0.15)",
148
+ "10": "rgba(26, 26, 26, 0.10)",
149
+ "5": "rgba(26, 26, 26, 0.05)",
150
+ "1": "rgba(26, 26, 26, 0.01)"
142
151
  },
143
- "warning": {
144
- "800": "#664D03",
145
- "700": "#D29604",
146
- "600": "#FFC107",
147
- "500": "#F9B12D",
148
- "400": "#FFE58F",
149
- "300": "#FFF3CD",
150
- "200": "#FFF9DADA",
151
- "100": "#FDF2F2"
152
+ "white": {
153
+ "90": "rgba(255, 255, 255, 0.90)",
154
+ "80": "rgba(255, 255, 255, 0.80)",
155
+ "65": "rgba(255, 255, 255, 0.65)",
156
+ "50": "rgba(255, 255, 255, 0.50)",
157
+ "35": "rgba(255, 255, 255, 0.35)",
158
+ "25": "rgba(255, 255, 255, 0.25)",
159
+ "20": "rgba(255, 255, 255, 0.20)",
160
+ "15": "rgba(255, 255, 255, 0.15)",
161
+ "10": "rgba(255, 255, 255, 0.10)",
162
+ "5": "rgba(255, 255, 255, 0.05)",
163
+ "1": "rgba(255, 255, 255, 0.01)"
152
164
  }
153
165
  },
154
-
155
- "gradient": {
156
- "membership": {
157
- "access": ["#1A237E", "#3949AB"],
158
- "elite": ["#4E342E", "#8D6E63"],
159
- "prestige": ["#C9A23F", "#F5E082"],
160
- "prive": ["#212121", "#000000"]
161
- }
166
+ "text": {
167
+ "title": "#1A1A1A",
168
+ "body": "#4D4D4D",
169
+ "secondary": "#757575",
170
+ "tertiary": "#A9A9A9"
162
171
  }
163
172
  },
164
-
165
173
  "dark": {
166
174
  "surface": {
167
175
  "bg": "#0B0B0C",
168
- "raised": "#161618",
176
+ "raised": "#161616",
169
177
  "border": "#2E2E33"
170
178
  },
171
179
  "text": {
@@ -173,18 +181,5 @@
173
181
  "secondary": "#D1D5DB",
174
182
  "muted": "#9CA3AF"
175
183
  }
176
- },
177
-
178
- "text": {
179
- "body": {
180
- "800": "#000000",
181
- "700": "#161616",
182
- "600": "#333333",
183
- "500": "#4D4D4D",
184
- "400": "#666666",
185
- "300": "#808080",
186
- "200": "#B3B3B3",
187
- "100": "#FFFFFF"
188
- }
189
184
  }
190
- }
185
+ }