@beam-ui/design-tokens 1.0.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/CHANGELOG.md +13 -0
  2. package/README.md +394 -0
  3. package/USAGE.md +286 -0
  4. package/build/base/tokens.es6.js +106 -0
  5. package/build/base/tokens.json +144 -0
  6. package/build/base/variables.css +108 -0
  7. package/build/globals/tokens.es6.js +9 -0
  8. package/build/globals/tokens.json +11 -0
  9. package/build/globals/variables.css +11 -0
  10. package/build/semantic/tokens.es6.js +316 -0
  11. package/build/semantic/tokens.json +431 -0
  12. package/build/semantic/variables.css +315 -0
  13. package/package.json +52 -0
package/build/semantic/variables.css ADDED
@@ -0,0 +1,315 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --button-primary-background: var(--color-gray-black);
7
+ --button-primary-background-hover: var(--color-gray-700);
8
+ --button-primary-background-active: var(--color-gray-500);
9
+ --button-primary-background-disabled: var(--color-gray-400);
10
+ --button-primary-text: var(--color-gray-white);
11
+ --button-primary-text-hover: var(--color-gray-white);
12
+ --button-primary-text-active: var(--color-gray-white);
13
+ --button-primary-text-disabled: var(--color-gray-white);
14
+ --button-primary-border: var(--color-gray-black);
15
+ --button-primary-border-hover: var(--color-gray-700);
16
+ --button-primary-border-active: var(--color-gray-500);
17
+ --button-primary-border-disabled: var(--color-gray-400);
18
+ --button-primary-font-size: var(--font-size-medium);
19
+ --button-primary-line-height: var(--font-line-height-small);
20
+ --button-primary-border-radius: var(--border-radius-xx-small);
21
+ --button-primary-border-width: var(--border-width-thin);
22
+ --button-secondary-background: var(--color-gray-white);
23
+ --button-secondary-background-hover: var(--color-gray-100);
24
+ --button-secondary-background-active: var(--color-gray-200);
25
+ --button-secondary-background-disabled: var(--color-gray-300);
26
+ --button-secondary-text: var(--color-gray-black);
27
+ --button-secondary-text-hover: var(--color-gray-black);
28
+ --button-secondary-text-active: var(--color-gray-black);
29
+ --button-secondary-text-disabled: var(--color-gray-black);
30
+ --button-secondary-border: var(--color-gray-200);
31
+ --button-secondary-border-hover: var(--color-gray-400);
32
+ --button-secondary-border-active: var(--color-gray-black);
33
+ --button-secondary-border-disabled: var(--color-gray-400);
34
+ --button-secondary-font-size: var(--font-size-medium);
35
+ --button-secondary-line-height: var(--font-line-height-small);
36
+ --button-secondary-border-radius: var(--border-radius-xx-small);
37
+ --button-secondary-border-width: var(--border-width-thin);
38
+ --button-tertiary-background: var(--color-gray-white);
39
+ --button-tertiary-background-hover: var(--color-gray-100);
40
+ --button-tertiary-background-active: var(--color-gray-200);
41
+ --button-tertiary-background-disabled: var(--color-gray-300);
42
+ --button-tertiary-text: var(--color-gray-black);
43
+ --button-tertiary-text-hover: var(--color-gray-black);
44
+ --button-tertiary-text-active: var(--color-gray-black);
45
+ --button-tertiary-text-disabled: var(--color-gray-black);
46
+ --button-tertiary-border: var(--color-transparent);
47
+ --button-tertiary-border-hover: var(--color-gray-200);
48
+ --button-tertiary-border-active: var(--color-gray-black);
49
+ --button-tertiary-border-disabled: var(--color-transparent);
50
+ --button-tertiary-font-size: var(--font-size-medium);
51
+ --button-tertiary-line-height: var(--font-line-height-small);
52
+ --button-tertiary-border-radius: var(--border-radius-xx-small);
53
+ --button-tertiary-border-width: var(--border-width-thin);
54
+ --button-danger-primary-background: var(--color-red-600);
55
+ --button-danger-primary-background-hover: var(--color-red-700);
56
+ --button-danger-primary-background-active: var(--color-red-600);
57
+ --button-danger-primary-background-disabled: var(--color-red-400);
58
+ --button-danger-primary-text: var(--color-gray-white);
59
+ --button-danger-primary-text-hover: var(--color-gray-white);
60
+ --button-danger-primary-text-active: var(--color-gray-white);
61
+ --button-danger-primary-text-disabled: var(--color-gray-white);
62
+ --button-danger-primary-border: var(--color-red-600);
63
+ --button-danger-primary-border-hover: var(--color-red-700);
64
+ --button-danger-primary-border-active: var(--color-red-600);
65
+ --button-danger-primary-border-disabled: var(--color-red-400);
66
+ --button-danger-primary-font-size: var(--font-size-medium);
67
+ --button-danger-primary-line-height: var(--font-line-height-small);
68
+ --button-danger-primary-border-radius: var(--border-radius-xx-small);
69
+ --button-danger-primary-border-width: var(--border-width-thin);
70
+ --button-danger-secondary-background: var(--color-gray-white);
71
+ --button-danger-secondary-background-hover: var(--color-gray-100);
72
+ --button-danger-secondary-background-active: var(--color-gray-200);
73
+ --button-danger-secondary-background-disabled: var(--color-gray-300);
74
+ --button-danger-secondary-text: var(--color-red-600);
75
+ --button-danger-secondary-text-hover: var(--color-red-600);
76
+ --button-danger-secondary-text-active: var(--color-red-600);
77
+ --button-danger-secondary-text-disabled: var(--color-red-600);
78
+ --button-danger-secondary-border: var(--color-gray-white);
79
+ --button-danger-secondary-border-hover: var(--color-gray-100);
80
+ --button-danger-secondary-border-active: var(--color-gray-200);
81
+ --button-danger-secondary-border-disabled: var(--color-gray-300);
82
+ --button-danger-secondary-font-size: var(--font-size-medium);
83
+ --button-danger-secondary-line-height: var(--font-line-height-small);
84
+ --button-danger-secondary-border-radius: var(--border-radius-xx-small);
85
+ --button-danger-secondary-border-width: var(--border-width-thin);
86
+ --button-size-sm-padding-inline: var(--spacing-x-small);
87
+ --button-size-sm-padding-block: var(--spacing-x-small);
88
+ --button-size-sm-min-width: var(--a11y-min-touch-target);
89
+ --button-size-md-padding-inline: var(--spacing-small);
90
+ --button-size-md-padding-block: var(--spacing-small);
91
+ --button-size-md-min-width: var(--a11y-min-touch-target);
92
+ --button-size-lg-padding-inline: var(--spacing-medium);
93
+ --button-size-lg-padding-block: var(--spacing-medium);
94
+ --button-size-lg-min-width: var(--a11y-min-touch-target);
95
+ --color-background-primary: var(--color-gray-white);
96
+ --color-background-secondary: var(--color-gray-50);
97
+ --color-background-tertiary: var(--color-gray-100);
98
+ --color-background-inverse: var(--color-gray-black);
99
+ --color-background-overlay: var(--color-overlay-dark);
100
+ --color-background-backdrop: var(--color-overlay-light);
101
+ --color-background-elevated: var(--color-gray-white);
102
+ --color-background-sunken: var(--color-gray-50);
103
+ --color-surface-primary: var(--color-gray-white);
104
+ --color-surface-secondary: var(--color-gray-50);
105
+ --color-surface-tertiary: var(--color-gray-100);
106
+ --color-surface-hover: var(--color-gray-100);
107
+ --color-surface-active: var(--color-gray-200);
108
+ --color-surface-disabled: var(--color-gray-400);
109
+ --color-surface-selected: var(--color-gray-white);
110
+ --color-surface-inverse: var(--color-gray-black);
111
+ --color-border-primary: var(--color-gray-100);
112
+ --color-border-secondary: var(--color-gray-200);
113
+ --color-border-tertiary: var(--color-gray-500);
114
+ --color-border-interactive: var(--color-gray-200);
115
+ --color-border-hover: var(--color-gray-400);
116
+ --color-border-focus: var(--color-gray-black);
117
+ --color-border-error: var(--color-red-600);
118
+ --color-border-success: var(--color-green-600);
119
+ --color-border-warning: var(--color-orange-600);
120
+ --color-border-info: var(--color-blue-500);
121
+ --color-border-disabled: var(--color-gray-400);
122
+ --color-border-inverse: var(--color-gray-black);
123
+ --color-text-primary: var(--color-gray-black);
124
+ --color-text-secondary: var(--color-gray-700);
125
+ --color-text-tertiary: var(--color-gray-600);
126
+ --color-text-quaternary: var(--color-gray-500);
127
+ --color-text-placeholder: var(--color-gray-500);
128
+ --color-text-disabled: var(--color-gray-400);
129
+ --color-text-inverse: var(--color-gray-white);
130
+ --color-text-link: var(--color-gray-black);
131
+ --color-text-link-hover: var(--color-gray-700);
132
+ --color-text-link-visited: var(--color-gray-600);
133
+ --color-text-error: var(--color-red-600);
134
+ --color-text-success: var(--color-green-600);
135
+ --color-text-warning: var(--color-orange-600);
136
+ --color-text-info: var(--color-blue-500);
137
+ --color-icon-primary: var(--color-gray-black);
138
+ --color-icon-secondary: var(--color-gray-600);
139
+ --color-icon-tertiary: var(--color-gray-500);
140
+ --color-icon-interactive: var(--color-gray-black);
141
+ --color-icon-hover: var(--color-gray-700);
142
+ --color-icon-active: var(--color-gray-black);
143
+ --color-icon-disabled: var(--color-gray-400);
144
+ --color-icon-inverse: var(--color-gray-white);
145
+ --color-icon-error: var(--color-red-600);
146
+ --color-icon-success: var(--color-green-600);
147
+ --color-icon-warning: var(--color-orange-600);
148
+ --color-icon-info: var(--color-blue-500);
149
+ --color-interactive-primary-default: var(--color-gray-black);
150
+ --color-interactive-primary-hover: var(--color-gray-700);
151
+ --color-interactive-primary-active: var(--color-gray-500);
152
+ --color-interactive-primary-disabled: var(--color-gray-400);
153
+ --color-interactive-inverse-default: var(--color-gray-white);
154
+ --color-interactive-inverse-hover: var(--color-gray-100);
155
+ --color-interactive-inverse-active: var(--color-gray-200);
156
+ --color-interactive-inverse-disabled: var(--color-gray-300);
157
+ --color-interactive-success-default: var(--color-green-600);
158
+ --color-interactive-success-hover: var(--color-green-700);
159
+ --color-interactive-success-active: var(--color-green-600);
160
+ --color-interactive-success-disabled: var(--color-green-400);
161
+ --color-interactive-warning-default: var(--color-orange-600);
162
+ --color-interactive-warning-hover: var(--color-orange-700);
163
+ --color-interactive-warning-active: var(--color-orange-600);
164
+ --color-interactive-warning-disabled: var(--color-orange-400);
165
+ --color-interactive-info-default: var(--color-blue-600);
166
+ --color-interactive-info-hover: var(--color-blue-700);
167
+ --color-interactive-info-active: var(--color-blue-600);
168
+ --color-interactive-info-disabled: var(--color-blue-400);
169
+ --color-interactive-error-default: var(--color-red-600);
170
+ --color-interactive-error-hover: var(--color-red-700);
171
+ --color-interactive-error-active: var(--color-red-600);
172
+ --color-interactive-error-disabled: var(--color-red-400);
173
+ --color-status-success-base: var(--color-green-600);
174
+ --color-status-success-light: var(--color-green-200);
175
+ --color-status-success-dark: var(--color-green-700);
176
+ --color-status-success-contrast: var(--color-green-100);
177
+ --color-status-warning-base: var(--color-orange-600);
178
+ --color-status-warning-light: var(--color-orange-200);
179
+ --color-status-warning-dark: var(--color-orange-700);
180
+ --color-status-warning-contrast: var(--color-orange-100);
181
+ --color-status-info-base: var(--color-blue-500);
182
+ --color-status-info-light: var(--color-blue-200);
183
+ --color-status-info-dark: var(--color-blue-700);
184
+ --color-status-info-contrast: var(--color-blue-100);
185
+ --color-status-error-base: var(--color-red-600);
186
+ --color-status-error-light: var(--color-red-200);
187
+ --color-status-error-dark: var(--color-red-700);
188
+ --color-status-error-contrast: var(--color-red-100);
189
+ --color-primary-base: var(--color-yellow-500);
190
+ --color-primary-light: var(--color-yellow-200);
191
+ --color-primary-lighter: var(--color-yellow-300);
192
+ --color-primary-dark: var(--color-yellow-600);
193
+ --color-primary-contrast: var(--color-yellow-100);
194
+ --color-secondary-base: var(--color-blue-500);
195
+ --color-secondary-light: var(--color-blue-200);
196
+ --color-secondary-lighter: var(--color-blue-300);
197
+ --color-secondary-dark: var(--color-blue-700);
198
+ --color-secondary-contrast: var(--color-blue-100);
199
+ --color-accent-base: var(--color-purple-600);
200
+ --color-accent-light: var(--color-purple-200);
201
+ --color-accent-lighter: var(--color-purple-300);
202
+ --color-accent-dark: var(--color-purple-700);
203
+ --color-accent-contrast: var(--color-purple-100);
204
+ --typography-display-100-font-size: var(--font-size-xxxx-large);
205
+ --typography-display-100-line-height: var(--font-line-height-tight);
206
+ --typography-display-100-letter-spacing: var(--font-letter-spacing-x-small);
207
+ --typography-display-100-color: var(--color-gray-black);
208
+ --typography-display-100-inverse: var(--color-gray-white);
209
+ --typography-display-200-font-size: var(--font-size-xxx-large);
210
+ --typography-display-200-line-height: var(--font-line-height-tight);
211
+ --typography-display-200-letter-spacing: var(--font-letter-spacing-x-small);
212
+ --typography-display-200-color: var(--color-gray-black);
213
+ --typography-display-200-inverse: var(--color-gray-white);
214
+ --typography-display-300-font-size: var(--font-size-xx-large);
215
+ --typography-display-300-line-height: var(--font-line-height-tight);
216
+ --typography-display-300-letter-spacing: var(--font-letter-spacing-x-small);
217
+ --typography-display-300-color: var(--color-gray-black);
218
+ --typography-display-300-inverse: var(--color-gray-white);
219
+ --typography-display-400-font-size: var(--font-size-x-large);
220
+ --typography-display-400-line-height: var(--font-line-height-tight);
221
+ --typography-display-400-letter-spacing: var(--font-letter-spacing-x-small);
222
+ --typography-display-400-color: var(--color-gray-black);
223
+ --typography-display-400-inverse: var(--color-gray-white);
224
+ --typography-display-500-font-size: var(--font-size-large);
225
+ --typography-display-500-line-height: var(--font-line-height-tight);
226
+ --typography-display-500-letter-spacing: var(--font-letter-spacing-x-small);
227
+ --typography-display-500-color: var(--color-gray-black);
228
+ --typography-display-500-inverse: var(--color-gray-white);
229
+ --typography-heading-100-font-size: var(--font-size-xxxx-large);
230
+ --typography-heading-100-line-height: var(--font-line-height-small);
231
+ --typography-heading-100-letter-spacing: var(--font-letter-spacing-small);
232
+ --typography-heading-100-color: var(--color-gray-black);
233
+ --typography-heading-100-inverse: var(--color-gray-white);
234
+ --typography-heading-200-font-size: var(--font-size-xxx-large);
235
+ --typography-heading-200-line-height: var(--font-line-height-small);
236
+ --typography-heading-200-letter-spacing: var(--font-letter-spacing-small);
237
+ --typography-heading-200-color: var(--color-gray-black);
238
+ --typography-heading-200-inverse: var(--color-gray-white);
239
+ --typography-heading-300-font-size: var(--font-size-xx-large);
240
+ --typography-heading-300-line-height: var(--font-line-height-small);
241
+ --typography-heading-300-letter-spacing: var(--font-letter-spacing-small);
242
+ --typography-heading-300-color: var(--color-gray-black);
243
+ --typography-heading-300-inverse: var(--color-gray-white);
244
+ --typography-heading-400-font-size: var(--font-size-x-large);
245
+ --typography-heading-400-line-height: var(--font-line-height-small);
246
+ --typography-heading-400-letter-spacing: var(--font-letter-spacing-small);
247
+ --typography-heading-400-color: var(--color-gray-black);
248
+ --typography-heading-400-inverse: var(--color-gray-white);
249
+ --typography-heading-500-font-size: var(--font-size-large);
250
+ --typography-heading-500-line-height: var(--font-line-height-small);
251
+ --typography-heading-500-letter-spacing: var(--font-letter-spacing-small);
252
+ --typography-heading-500-color: var(--color-gray-black);
253
+ --typography-heading-500-inverse: var(--color-gray-white);
254
+ --typography-body-large-default-font-size: var(--font-size-large);
255
+ --typography-body-large-default-line-height: var(--font-line-height-small);
256
+ --typography-body-large-default-letter-spacing: var(--font-letter-spacing-normal);
257
+ --typography-body-large-default-color: var(--color-gray-black);
258
+ --typography-body-large-default-inverse: var(--color-gray-white);
259
+ --typography-body-large-medium-font-size: var(--font-size-large);
260
+ --typography-body-large-medium-line-height: var(--font-line-height-small);
261
+ --typography-body-large-medium-letter-spacing: var(--font-letter-spacing-normal);
262
+ --typography-body-large-medium-color: var(--color-gray-black);
263
+ --typography-body-large-medium-inverse: var(--color-gray-white);
264
+ --typography-body-base-default-font-size: var(--font-size-medium);
265
+ --typography-body-base-default-line-height: var(--font-line-height-small);
266
+ --typography-body-base-default-letter-spacing: var(--font-letter-spacing-normal);
267
+ --typography-body-base-default-color: var(--color-gray-black);
268
+ --typography-body-base-default-inverse: var(--color-gray-white);
269
+ --typography-body-base-medium-font-size: var(--font-size-medium);
270
+ --typography-body-base-medium-line-height: var(--font-line-height-small);
271
+ --typography-body-base-medium-letter-spacing: var(--font-letter-spacing-normal);
272
+ --typography-body-base-medium-color: var(--color-gray-black);
273
+ --typography-body-base-medium-inverse: var(--color-gray-white);
274
+ --typography-body-small-default-font-size: var(--font-size-small);
275
+ --typography-body-small-default-line-height: var(--font-line-height-small);
276
+ --typography-body-small-default-letter-spacing: var(--font-letter-spacing-normal);
277
+ --typography-body-small-default-color: var(--color-gray-black);
278
+ --typography-body-small-default-inverse: var(--color-gray-white);
279
+ --typography-body-small-medium-font-size: var(--font-size-small);
280
+ --typography-body-small-medium-line-height: var(--font-line-height-small);
281
+ --typography-body-small-medium-letter-spacing: var(--font-letter-spacing-normal);
282
+ --typography-body-small-medium-color: var(--color-gray-black);
283
+ --typography-body-small-medium-inverse: var(--color-gray-white);
284
+ --typography-label-base-font-size: var(--font-size-x-small);
285
+ --typography-label-base-line-height: var(--font-line-height-small);
286
+ --typography-label-base-letter-spacing: var(--font-letter-spacing-large);
287
+ --typography-label-base-color: var(--color-gray-black);
288
+ --typography-label-base-inverse: var(--color-gray-white);
289
+ --typography-caption-font-size: var(--font-size-x-small);
290
+ --typography-caption-line-height: var(--font-line-height-small);
291
+ --typography-caption-letter-spacing: var(--font-letter-spacing-large);
292
+ --typography-caption-color: var(--color-gray-700);
293
+ --typography-caption-inverse: var(--color-gray-white);
294
+ --typography-overline-font-size: var(--font-size-x-small);
295
+ --typography-overline-line-height: var(--font-line-height-small);
296
+ --typography-overline-letter-spacing: var(--font-letter-spacing-large);
297
+ --typography-overline-color: var(--color-gray-black);
298
+ --typography-overline-inverse: var(--color-gray-white);
299
+ --typography-display-100-font-family: var(--font-family-display);
300
+ --typography-display-200-font-family: var(--font-family-display);
301
+ --typography-display-300-font-family: var(--font-family-display);
302
+ --typography-display-400-font-family: var(--font-family-display);
303
+ --typography-display-500-font-family: var(--font-family-display);
304
+ --typography-heading-100-font-family: var(--font-family-heading);
305
+ --typography-heading-200-font-family: var(--font-family-heading);
306
+ --typography-heading-300-font-family: var(--font-family-heading);
307
+ --typography-heading-400-font-family: var(--font-family-heading);
308
+ --typography-heading-500-font-family: var(--font-family-heading);
309
+ --typography-body-large-default-font-family: var(--font-family-body);
310
+ --typography-body-large-medium-font-family: var(--font-family-heading);
311
+ --typography-body-base-default-font-family: var(--font-family-body);
312
+ --typography-body-base-medium-font-family: var(--font-family-heading);
313
+ --typography-body-small-default-font-family: var(--font-family-body);
314
+ --typography-body-small-medium-font-family: var(--font-family-heading);
315
+ }
package/package.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "name": "@beam-ui/design-tokens",
3
+ "version": "1.0.0",
4
+ "description": "A collection of design decisions and other artifacts for the Beam UI Design System",
5
+ "type": "module",
6
+ "main": "./build/base/tokens.es6.js",
7
+ "module": "./build/base/tokens.es6.js",
8
+ "exports": {
9
+ "./build/*": "./build/*"
10
+ },
11
+ "files": [
12
+ "build",
13
+ "USAGE.md",
14
+ "LICENSE",
15
+ "CHANGELOG.md"
16
+ ],
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "https://github.com/tatari-tv/beam-ui.git",
20
+ "directory": "design-tokens"
21
+ },
22
+ "homepage": "https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme",
23
+ "bugs": {
24
+ "url": "https://github.com/tatari-tv/beam-ui/issues"
25
+ },
26
+ "keywords": [
27
+ "design-tokens",
28
+ "design-system",
29
+ "tokens",
30
+ "css-variables",
31
+ "style-dictionary",
32
+ "beam-ui"
33
+ ],
34
+ "scripts": {
35
+ "build": "node ./build.js",
36
+ "clean": "rm -rf build",
37
+ "prepublishOnly": "npm run clean && npm run build",
38
+ "changeset": "changeset",
39
+ "version": "changeset version",
40
+ "release": "npm run build && changeset publish",
41
+ "test": "echo \"Error: no test specified\" && exit 1"
42
+ },
43
+ "author": "Beam UI Team",
44
+ "license": "MIT",
45
+ "publishConfig": {
46
+ "access": "public"
47
+ },
48
+ "devDependencies": {
49
+ "@changesets/cli": "^2.29.7",
50
+ "style-dictionary": "^5.1.1"
51
+ }
52
+ }