@namp88/compass-tokens 1.0.3

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 (35) hide show
  1. package/README.md +90 -0
  2. package/dist/css/primitives.css +348 -0
  3. package/dist/css/themes/dark.css +506 -0
  4. package/dist/css/themes/highcontrast.css +506 -0
  5. package/dist/css/themes/light.css +506 -0
  6. package/dist/css/tokens.css +2372 -0
  7. package/dist/scss/_badge-lg.scss +13 -0
  8. package/dist/scss/_badge-md.scss +13 -0
  9. package/dist/scss/_badge-sm.scss +13 -0
  10. package/dist/scss/_badge-xs.scss +13 -0
  11. package/dist/scss/_button-lg.scss +35 -0
  12. package/dist/scss/_button-md.scss +35 -0
  13. package/dist/scss/_button-sm.scss +35 -0
  14. package/dist/scss/_button-xs.scss +35 -0
  15. package/dist/scss/_card.scss +5 -0
  16. package/dist/scss/_colors.scss +190 -0
  17. package/dist/scss/_dropdown-lg.scss +12 -0
  18. package/dist/scss/_dropdown-md.scss +12 -0
  19. package/dist/scss/_dropdown-sm.scss +12 -0
  20. package/dist/scss/_icon-size-lg.scss +8 -0
  21. package/dist/scss/_icon-size-md.scss +8 -0
  22. package/dist/scss/_icon-size-sm.scss +8 -0
  23. package/dist/scss/_icon-size-xs.scss +8 -0
  24. package/dist/scss/_index.scss +30 -0
  25. package/dist/scss/_input-lg.scss +37 -0
  26. package/dist/scss/_input-md.scss +37 -0
  27. package/dist/scss/_input-sm.scss +37 -0
  28. package/dist/scss/_primitives.scss +206 -0
  29. package/dist/scss/_semantic-dark.scss +644 -0
  30. package/dist/scss/_semantic-high-contrast.scss +644 -0
  31. package/dist/scss/_semantic-light.scss +644 -0
  32. package/dist/scss/_typography.scss +115 -0
  33. package/dist/scss/tokens.scss +2853 -0
  34. package/package.json +55 -0
  35. package/tokens/design-tokens.json +24991 -0
package/README.md ADDED
@@ -0,0 +1,90 @@
1
+ # @namp88/compass-tokens
2
+
3
+ Design tokens for Compass design system as CSS custom properties.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @namp88/compass-tokens
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ### CSS (recommended for Vue 3)
14
+
15
+ ```js
16
+ // main.ts or main.js
17
+ import '@namp88/compass-tokens'
18
+ ```
19
+
20
+ Then use CSS variables in your components:
21
+
22
+ ```vue
23
+ <template>
24
+ <button class="btn">Click me</button>
25
+ </template>
26
+
27
+ <style scoped>
28
+ .btn {
29
+ background: var(--gl-color-primary);
30
+ color: var(--gl-color-text-on-primary);
31
+ padding: var(--gl-space-sm) var(--gl-space-lg);
32
+ border-radius: var(--gl-radius-md);
33
+ font-size: var(--gl-font-size-md);
34
+ }
35
+ </style>
36
+ ```
37
+
38
+ ### SCSS
39
+
40
+ ```scss
41
+ @use '@namp88/compass-tokens/scss' as tokens;
42
+
43
+ // Or import specific files
44
+ @use '@namp88/compass-tokens/scss/colors';
45
+ @use '@namp88/compass-tokens/scss/typography';
46
+ ```
47
+
48
+ ### Themes (optional)
49
+
50
+ Default theme (Light) is applied to `:root`. For dark mode:
51
+
52
+ ```js
53
+ // Import specific theme
54
+ import '@namp88/compass-tokens/css/themes/dark.css'
55
+ ```
56
+
57
+ ```html
58
+ <!-- Apply theme via data attribute -->
59
+ <html data-theme="dark">
60
+ ```
61
+
62
+ ## Available Tokens
63
+
64
+ ### Colors
65
+ - `--gl-color-primary`, `--gl-color-secondary`, etc.
66
+ - `--gl-color-text-*`, `--gl-color-background-*`
67
+ - `--gl-color-border-*`, `--gl-color-icon-*`
68
+
69
+ ### Spacing
70
+ - `--gl-space-xs`, `--gl-space-sm`, `--gl-space-md`, `--gl-space-lg`, etc.
71
+
72
+ ### Typography
73
+ - `--gl-font-size-*`
74
+ - `--gl-font-weight-*`
75
+ - `--gl-line-height-*`
76
+
77
+ ### Border Radius
78
+ - `--gl-radius-sm`, `--gl-radius-md`, `--gl-radius-lg`
79
+
80
+ ## Raw Tokens
81
+
82
+ Access raw JSON tokens:
83
+
84
+ ```js
85
+ import tokens from '@namp88/compass-tokens/tokens.json'
86
+ ```
87
+
88
+ ## License
89
+
90
+ MIT
package/dist/css/primitives.css ADDED
@@ -0,0 +1,348 @@
1
+ /* ==========================================================================
2
+ Design Tokens - Primitives
3
+ Base values: colors, spacing, sizes, typography
4
+ Generated at: 2026-02-04T14:40:26.039Z
5
+ Variables: 333
6
+ ========================================================================== */
7
+
8
+ :root {
9
+
10
+ /* Primitives */
11
+ --gl-space-xs: 10px;
12
+ --gl-border-width-none: 0;
13
+ --gl-border-radius-none: 0;
14
+ --gl-border-radius-2xs: 2px;
15
+ --gl-border-radius-xs: 4px;
16
+ --gl-border-radius-sm: 6px;
17
+ --gl-border-radius-md: 8px;
18
+ --gl-border-radius-lg: 10px;
19
+ --gl-border-radius-xl: 12px;
20
+ --gl-border-radius-rounded: 999px;
21
+ --gl-space-lg: 16px;
22
+ --gl-space-3xl: 24px;
23
+ --gl-space-5xl: 32px;
24
+ --gl-space-7xl: 40px;
25
+ --gl-space-9xl: 48px;
26
+ --gl-space-10xl: 56px;
27
+ --gl-space-11xl: 64px;
28
+ --gl-space-12xl: 72px;
29
+ --gl-13xl: 80px;
30
+ --gl-space-2xs: 8px;
31
+ --gl-size-md: 16px;
32
+ --gl-size-xl: 20px;
33
+ --gl-size-2xl: 24px;
34
+ --gl-size-3xl: 32px;
35
+ --gl-size-5xl: 40px;
36
+ --gl-size-7xl: 48px;
37
+ --gl-size-8xl: 56px;
38
+ --gl-size-9xl: 64px;
39
+ --gl-size-10xl: 80px;
40
+ --gl-size-11xl: 120px;
41
+ --gl-size-3xs: 8px;
42
+ --gl-size-xs: 12px;
43
+ --gl-opacity-white-transparent: #ffffff00;
44
+ --gl-opacity-white-92: #ffffffeb;
45
+ --gl-opacity-neutral-transparent: #1d212b00;
46
+ --gl-space-sm: 12px;
47
+ --gl-size-4xs: 4px;
48
+ --gl-space-4xs: 4px;
49
+ --gl-space-2xl: 20px;
50
+ --gl-opacity-white-01: #ffffff03;
51
+ --gl-border-width-sm: 0.5px;
52
+ --gl-border-width-md: 1px;
53
+ --gl-border-width-lg: 2px;
54
+ --gl-opacity-neutral-09: #1c253117;
55
+ --gl-size-lg: 18px;
56
+ --gl-size-sm: 14px;
57
+ --gl-border-width-xl: 4px;
58
+ --gl-space-5xs: 2px;
59
+ --gl-size-2xs: 10px;
60
+ --gl-opacity-white-03: #ffffff08;
61
+ --gl-opacity-white-06: #ffffff0f;
62
+ --gl-opacity-white-09: #ffffff17;
63
+ --gl-opacity-white-12: #ffffff1f;
64
+ --gl-opacity-white-18: #ffffff2e;
65
+ --gl-opacity-white-25: #ffffff40;
66
+ --gl-opacity-white-40: #ffffff63;
67
+ --gl-opacity-white-45: #ffffff73;
68
+ --gl-opacity-white-59: #ffffff96;
69
+ --gl-opacity-neutral-14: #1c253124;
70
+ --gl-opacity-neutral-11: #1c25311c;
71
+ --gl-opacity-neutral-07: #1c253112;
72
+ --gl-opacity-neutral-05: #1c25310d;
73
+ --gl-opacity-neutral-01: #1c253103;
74
+ --gl-opacity-neutral-03: #1c253108;
75
+ --gl-opacity-neutral-56: #1c25318f;
76
+ --gl-opacity-neutral-91: #1c2531e8;
77
+ --gl-opacity-neutral-44: #1c253170;
78
+ --gl-opacity-neutral-22: #1c253138;
79
+ --gl-shadow-2xs-ambient-color: #0000000d;
80
+ --gl-shadow-2xs-ambient-spread: 0;
81
+ --gl-shadow-2xs-ambient-blur: 2px;
82
+ --gl-shadow-2xs-ambient-y: 1px;
83
+ --gl-shadow-2xs-ambient-x: 0;
84
+ --gl-shadow-xs-ambient-x: 0;
85
+ --gl-shadow-xs-ambient-y: 1px;
86
+ --gl-shadow-xs-ambient-blur: 3px;
87
+ --gl-shadow-xs-ambient-spread: 0;
88
+ --gl-shadow-xs-ambient-color: #0000001a;
89
+ --gl-shadow-xs-key-x: 0;
90
+ --gl-shadow-xs-key-y: 1px;
91
+ --gl-shadow-xs-key-blur: 2px;
92
+ --gl-shadow-xs-key-spread: -1px;
93
+ --gl-shadow-xs-key-color: #0000001a;
94
+ --gl-shadow-sm-ambient-x: 0;
95
+ --gl-shadow-sm-ambient-y: 4px;
96
+ --gl-shadow-sm-ambient-blur: 6px;
97
+ --gl-shadow-sm-ambient-spread: -1px;
98
+ --gl-shadow-sm-ambient-color: #0000001a;
99
+ --gl-shadow-sm-key-x: 0;
100
+ --gl-shadow-sm-key-y: 2px;
101
+ --gl-shadow-sm-key-blur: 4px;
102
+ --gl-shadow-sm-key-spread: -2px;
103
+ --gl-shadow-sm-key-color: #0000000f;
104
+ --gl-shadow-md-ambient-x: 0;
105
+ --gl-shadow-md-ambient-y: 12px;
106
+ --gl-shadow-md-ambient-blur: 16px;
107
+ --gl-shadow-md-ambient-spread: -4px;
108
+ --gl-shadow-md-ambient-color: #00000014;
109
+ --gl-shadow-md-key-x: 0;
110
+ --gl-shadow-md-key-y: 4px;
111
+ --gl-shadow-md-key-blur: 6px;
112
+ --gl-shadow-md-key-spread: -2px;
113
+ --gl-shadow-md-key-color: #00000008;
114
+ --gl-shadow-lg-ambient-x: 0;
115
+ --gl-shadow-lg-ambient-y: 20px;
116
+ --gl-shadow-lg-ambient-blur: 24px;
117
+ --gl-shadow-lg-ambient-spread: -4px;
118
+ --gl-shadow-lg-ambient-color: #00000014;
119
+ --gl-shadow-lg-key-x: 0;
120
+ --gl-shadow-lg-key-y: 8px;
121
+ --gl-shadow-lg-key-blur: 8px;
122
+ --gl-shadow-lg-key-spread: -4px;
123
+ --gl-shadow-lg-key-color: #00000008;
124
+ --gl-shadow-xl-ambient-x: 0;
125
+ --gl-shadow-xl-ambient-y: 24px;
126
+ --gl-shadow-xl-ambient-blur: 48px;
127
+ --gl-shadow-xl-ambient-spread: -12px;
128
+ --gl-shadow-xl-ambient-color: #0000002e;
129
+ --gl-shadow-xl-key-x: 0;
130
+ --gl-shadow-xl-key-y: 4px;
131
+ --gl-shadow-xl-key-blur: 4px;
132
+ --gl-shadow-xl-key-spread: -2px;
133
+ --gl-shadow-xl-key-color: #0000000a;
134
+ --gl-shadow-2xl-ambient-x: 0;
135
+ --gl-shadow-2xl-ambient-y: 32px;
136
+ --gl-shadow-2xl-ambient-blur: 64px;
137
+ --gl-shadow-2xl-ambient-spread: -12px;
138
+ --gl-shadow-2xl-ambient-color: #0000001f;
139
+ --gl-shadow-2xl-key-x: 0;
140
+ --gl-shadow-2xl-key-y: 5px;
141
+ --gl-shadow-2xl-key-blur: 5px;
142
+ --gl-shadow-2xl-key-spread: -2.5px;
143
+ --gl-shadow-2xl-key-color: #0000000a;
144
+ --gl-shadow-2xs-key-x: 0;
145
+ --gl-shadow-2xs-key-y: 0;
146
+ --gl-shadow-2xs-key-blur: 1px;
147
+ --gl-shadow-2xs-key-spread: 0;
148
+ --gl-shadow-2xs-key-color: #00000012;
149
+ --gl-space-3xs: 6px;
150
+ --gl-space-8xl: 44px;
151
+ --gl-space-6xl: 36px;
152
+ --gl-space-none: 0;
153
+ --gl-space-md: 14px;
154
+ --gl-space-xl: 18px;
155
+ --gl-space-4xl: 28px;
156
+ --gl-size-4xl: 36px;
157
+ --gl-size-6xl: 44px;
158
+ --gl-border-radius-2xl: 16px;
159
+ --gl-opacity-white-75: #ffffffbf;
160
+ --gl-opacity-white-85: #ffffffd9;
161
+ --gl-opacity-neutral-74: #1c2531bd;
162
+ --gl-opacity-neutral-82: #1c2531d1;
163
+ --gl-border-radius-3xl: 20px;
164
+ --gl-border-radius-4xl: 24px;
165
+
166
+ /* Colors */
167
+ --gl-color-a11y-pink: #ff5cc3;
168
+ --gl-color-a11y-purple: #b880ff;
169
+ --gl-color-a11y-brand: #6beaff;
170
+ --gl-color-red-900: #52010a;
171
+ --gl-color-red-800: #6a010f;
172
+ --gl-color-red-700: #860919;
173
+ --gl-color-red-300: #ffb5a9;
174
+ --gl-color-yellow-900: #391d08;
175
+ --gl-color-yellow-800: #4a270e;
176
+ --gl-color-yellow-700: #643500;
177
+ --gl-color-yellow-500: #975f00;
178
+ --gl-color-red-200: #ffd6d1;
179
+ --gl-color-yellow-450: #c07800;
180
+ --gl-color-a11y-green: #42e051;
181
+ --gl-color-base-white: #ffffff;
182
+ --gl-color-neutral-500: #636a78;
183
+ --gl-color-pink-100: #ffe7f3;
184
+ --gl-color-yellow-200: #fadf91;
185
+ --gl-color-red-500: #cf292c;
186
+ --gl-color-yellow-100: #fdecbe;
187
+ --gl-color-orange-450: #ed4b24;
188
+ --gl-color-green-900: #112a0f;
189
+ --gl-color-green-800: #064305;
190
+ --gl-color-green-700: #0b5006;
191
+ --gl-color-orange-500: #ca3000;
192
+ --gl-color-green-500: #217e1f;
193
+ --gl-color-green-450: #31992e;
194
+ --gl-color-green-400: #6ecb66;
195
+ --gl-color-green-100: #d8fad5;
196
+ --gl-color-neutral-800: #292f3b;
197
+ --gl-color-green-50: #f0fdf0;
198
+ --gl-color-a11y-red: #ff6363;
199
+ --gl-color-pink-300: #ffb7dc;
200
+ --gl-color-turquoise-900: #00283b;
201
+ --gl-color-green-200: #b0f2ab;
202
+ --gl-color-turquoise-400: #5dc0f6;
203
+ --gl-color-teal-800: #033739;
204
+ --gl-color-turquoise-200: #bbe5ff;
205
+ --gl-color-turquoise-100: #def2ff;
206
+ --gl-color-turquoise-50: #f2faff;
207
+ --gl-color-teal-900: #09292b;
208
+ --gl-color-teal-100: #d1f8f9;
209
+ --gl-color-teal-700: #00494c;
210
+ --gl-color-a11y-yellow: #fbfb0f;
211
+ --gl-color-teal-500: #00797e;
212
+ --gl-color-teal-300: #62dee4;
213
+ --gl-color-turquoise-300: #8cd5ff;
214
+ --gl-color-teal-50: #edfcfc;
215
+ --gl-color-neutral-450: #747b8b;
216
+ --gl-color-orange-800: #640e04;
217
+ --gl-color-orange-600: #a31f00;
218
+ --gl-color-orange-400: #ff966e;
219
+ --gl-color-turquoise-450: #0096d1;
220
+ --gl-color-orange-300: #ffba96;
221
+ --gl-color-purple-500: #8a41e2;
222
+ --gl-color-turquoise-800: #00354c;
223
+ --gl-color-teal-600: #005d60;
224
+ --gl-color-orange-100: #ffe9d9;
225
+ --gl-color-turquoise-500: #0074a2;
226
+ --gl-color-pink-900: #4d0234;
227
+ --gl-color-pink-800: #6c044a;
228
+ --gl-color-neutral-600: #434957;
229
+ --gl-color-pink-700: #7e0758;
230
+ --gl-color-yellow-400: #efab00;
231
+ --gl-color-neutral-200: #e0e5eb;
232
+ --gl-color-pink-600: #9f0b70;
233
+ --gl-color-neutral-700: #363c48;
234
+ --gl-color-purple-300: #d6c2ff;
235
+ --gl-color-pink-400: #ff90ce;
236
+ --gl-color-red-450: #f14a3d;
237
+ --gl-color-pink-200: #ffcee7;
238
+ --gl-color-pink-50: #fff5fa;
239
+ --gl-color-orange-200: #fddbc3;
240
+ --gl-color-teal-400: #32c9d0;
241
+ --gl-color-purple-900: #340f5d;
242
+ --gl-color-purple-700: #5b13a1;
243
+ --gl-color-teal-200: #a8f1f5;
244
+ --gl-color-yellow-300: #f4c141;
245
+ --gl-color-blue-900: #011c50;
246
+ --gl-color-purple-400: #c6a8ff;
247
+ --gl-color-blue-800: #022a7a;
248
+ --gl-color-purple-600: #7324c4;
249
+ --gl-color-purple-100: #f1ebff;
250
+ --gl-color-yellow-50: #fff9e5;
251
+ --gl-color-purple-50: #f9f7ff;
252
+ --gl-color-blue-700: #02389e;
253
+ --gl-color-blue-600: #054ac1;
254
+ --gl-color-green-600: #186614;
255
+ --gl-color-red-600: #a51818;
256
+ --gl-color-teal-450: #008e94;
257
+ --gl-color-blue-450: #3882fa;
258
+ --gl-color-red-100: #ffe9e6;
259
+ --gl-color-orange-50: #fef6ee;
260
+ --gl-color-neutral-300: #c1c6d1;
261
+ --gl-color-blue-400: #8db8ff;
262
+ --gl-color-neutral-50: #f6f7fa;
263
+ --gl-color-turquoise-700: #014663;
264
+ --gl-color-blue-300: #aacfff;
265
+ --gl-color-green-300: #8ae182;
266
+ --gl-color-blue-200: #c8e1ff;
267
+ --gl-color-neutral-250: #d3d7de;
268
+ --gl-color-purple-200: #e3d6ff;
269
+ --gl-color-orange-700: #811600;
270
+ --gl-color-blue-100: #e5efff;
271
+ --gl-color-neutral-900: #1d212b;
272
+ --gl-color-purple-800: #470082;
273
+ --gl-color-pink-450: #e543a7;
274
+ --gl-color-turquoise-600: #005a7e;
275
+ --gl-color-blue-50: #f5f9ff;
276
+ --gl-color-red-50: #fff6f5;
277
+ --gl-color-neutral-550: #575c6a;
278
+ --gl-color-pink-500: #c61e8e;
279
+ --gl-color-base-black: #000000;
280
+ --gl-color-neutral-350: #a1a6b3;
281
+ --gl-color-red-400: #ff9688;
282
+ --gl-color-neutral-400: #8a8f9b;
283
+ --gl-color-blue-500: #0e66df;
284
+ --gl-color-orange-900: #4e0903;
285
+ --gl-color-yellow-600: #804600;
286
+ --gl-color-neutral-100: #f0f4f6;
287
+ --gl-color-purple-450: #a266fa;
288
+ --gl-color-a11y-teal: #6bffc3;
289
+ --gl-color-a11y-orange: #ffd26b;
290
+
291
+ /* Typography */
292
+ --gl-font-weight-regular: Regular;
293
+ --gl-font-weight-medium: Medium;
294
+ --gl-font-weight-bold: Bold;
295
+ --gl-line-height-none: 0;
296
+ --gl-line-height-xs: 16px;
297
+ --gl-line-height-sm: 20px;
298
+ --gl-line-height-md: 24px;
299
+ --gl-line-height-lg: 30px;
300
+ --gl-line-height-xl: 36px;
301
+ --gl-line-height-2xl: 48px;
302
+ --gl-line-height-3xl: 72px;
303
+ --gl-font-family-text: Inter;
304
+ --gl-font-family-heading: Poppins;
305
+ --gl-font-weight-semibold: SemiBold;
306
+ --gl-font-size-xs: 12px;
307
+ --gl-font-size-md: 16px;
308
+ --gl-font-size-lg: 18px;
309
+ --gl-font-size-xl: 20px;
310
+ --gl-font-size-3xl: 32px;
311
+ --gl-font-size-4xl: 40px;
312
+ --gl-font-size-sm: 14px;
313
+ --gl-font-size-5xl: 48px;
314
+ --gl-heading-font-size-4xl: var(--gl-font-size-5xl);
315
+ --gl-heading-line-height-4xl: var(--gl-line-height-3xl);
316
+ --gl-heading-font-family-4xl: var(--gl-font-family-heading);
317
+ --gl-heading-font-size-3xl: var(--gl-font-size-4xl);
318
+ --gl-heading-line-height-3xl: var(--gl-line-height-3xl);
319
+ --gl-heading-font-family-3xl: var(--gl-font-family-heading);
320
+ --gl-heading-font-size-2xl: var(--gl-font-size-3xl);
321
+ --gl-heading-line-height-2xl: var(--gl-line-height-2xl);
322
+ --gl-heading-font-family-2xl: var(--gl-font-family-heading);
323
+ --gl-heading-font-size-xl: var(--gl-font-size-xl);
324
+ --gl-heading-line-height-xl: var(--gl-line-height-xl);
325
+ --gl-heading-font-family-xl: var(--gl-font-family-heading);
326
+ --gl-heading-font-size-lg: var(--gl-font-size-xl);
327
+ --gl-heading-line-height-lg: var(--gl-line-height-lg);
328
+ --gl-heading-font-family-lg: var(--gl-font-family-heading);
329
+ --gl-heading-font-size-md: var(--gl-font-size-md);
330
+ --gl-heading-line-height-md: var(--gl-line-height-md);
331
+ --gl-heading-font-family-md: var(--gl-font-family-heading);
332
+ --gl-text-font-size-xl: var(--gl-font-size-2xl);
333
+ --gl-text-line-height-xl: var(--gl-line-height-xl);
334
+ --gl-text-font-family-xl: var(--gl-font-family-text);
335
+ --gl-text-font-size-lg: var(--gl-font-size-xl);
336
+ --gl-text-line-height-lg: var(--gl-line-height-lg);
337
+ --gl-text-font-family-lg: var(--gl-font-family-text);
338
+ --gl-text-font-size-md: var(--gl-font-size-md);
339
+ --gl-text-line-height-md: var(--gl-line-height-md);
340
+ --gl-text-font-family-md: var(--gl-font-family-text);
341
+ --gl-text-font-size-sm: var(--gl-font-size-sm);
342
+ --gl-text-line-height-sm: var(--gl-line-height-sm);
343
+ --gl-text-font-family-sm: var(--gl-font-family-text);
344
+ --gl-text-font-size-xs: var(--gl-font-size-xs);
345
+ --gl-text-line-height-xs: var(--gl-line-height-xs);
346
+ --gl-text-font-family-xs: var(--gl-font-family-text);
347
+ --gl-font-size-2xl: 24px;
348
+ }