@pepperui/tokens 1.2.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 (9) hide show
  1. package/README.md +101 -0
  2. package/dist/_tokens.scss +348 -0
  3. package/dist/figma.json +4503 -0
  4. package/dist/pepper_tokens.py +819 -0
  5. package/dist/shadcn.css +125 -0
  6. package/dist/tailwind.css +213 -0
  7. package/dist/tailwind.js +214 -0
  8. package/dist/tokens.css +573 -0
  9. package/package.json +24 -0
package/dist/tokens.css ADDED
@@ -0,0 +1,573 @@
1
+ /**
2
+ * tokens.css — CSS custom properties
3
+ * GENERATED by `npm run build` from tokens/*.json — do not edit by hand.
4
+ * Pepper UI, the Mobupps design system. Source of truth: bitbucket.org/rashidmobupps/pepper-ui
5
+ */
6
+
7
+ :root {
8
+ --pui-icon-list-ink: #6a66e4;
9
+ --pui-insight-max-width: 1344px;
10
+ --pui-bullet-list-gap: 8px;
11
+ --pui-chip-radius: 9999px;
12
+ --pui-table-header-bg: #0c0b41;
13
+ --pui-table-header-pill-tint: #d4d3f7;
14
+ --pui-table-row-selected-bg: #e9e9fb;
15
+ --pui-table-divider: #dad9d9;
16
+ --pui-card-band: #dad9d9;
17
+ --pui-avatar-blue-bg: #d4d3f7;
18
+ --pui-avatar-blue-fg: #110e56;
19
+ --pui-avatar-red-bg: #f9d3d2;
20
+ --pui-avatar-red-fg: #5b0e0d;
21
+ --pui-avatar-yellow-bg: #fdf3d3;
22
+ --pui-avatar-yellow-fg: #634e0f;
23
+ --pui-toggle-on-bg: #544d4d;
24
+ --pui-toggle-on-fg: #ffffff;
25
+ --pui-tabs-track: #f2f2f2;
26
+ --pui-kpi-tone-blue-bg: #e9e9fb;
27
+ --pui-kpi-tone-red-bg: #fce9e8;
28
+ --pui-kpi-tone-yellow-bg: #fef9e9;
29
+ --pui-kpi-tone-neutral-bg: #f2f2f2;
30
+ --pui-kpi-delta-ring: #ffffff;
31
+ --pui-nav-bg: #231b1b;
32
+ --pui-nav-item-fg: #b5b3b3;
33
+ --pui-nav-item-fg-active: #ffffff;
34
+ --pui-nav-item-bg-hover: #ffffff14;
35
+ --pui-nav-item-bg-active: #ffffff29;
36
+ --pui-nav-section-fg: #858080;
37
+ --pui-illustration-shell: #ffffff;
38
+ --pui-illustration-surface: #f2f2f7;
39
+ --pui-illustration-detail: #dad9d9;
40
+ --pui-illustration-screen: #fbfbfd;
41
+ --pui-illustration-deck: #ffffff;
42
+ --pui-illustration-text: #0b0202;
43
+ --pui-illustration-outline-color: #0b0202;
44
+ --pui-illustration-outline-opacity: 0.85;
45
+ --pui-illustration-outline-width: 0.5;
46
+ --pui-illustration-connector-color: #b5b3b3;
47
+ --pui-illustration-connector-radius: 0.028;
48
+ --pui-illustration-arrow-color: #6c6666;
49
+ --pui-illustration-arrow-width: 3;
50
+ --pui-illustration-arrow-head-length: 5;
51
+ --pui-illustration-arrow-head-angle: 40;
52
+ --pui-color-neutral-0: #ffffff;
53
+ --pui-color-neutral-100: #f2f2f2;
54
+ --pui-color-neutral-200: #dad9d9;
55
+ --pui-color-neutral-300: #b5b3b3;
56
+ --pui-color-neutral-400: #858080;
57
+ --pui-color-neutral-500: #6c6666;
58
+ --pui-color-neutral-600: #544d4d;
59
+ --pui-color-neutral-700: #3b3333;
60
+ --pui-color-neutral-800: #231b1b;
61
+ --pui-color-neutral-900: #0b0202;
62
+ --pui-color-neutral-1000: #000000;
63
+ --pui-color-blue-100: #e9e9fb;
64
+ --pui-color-blue-200: #d4d3f7;
65
+ --pui-color-blue-300: #6a66e4;
66
+ --pui-color-blue-400: #2b25d9;
67
+ --pui-color-blue-500: #221dad;
68
+ --pui-color-blue-600: #110e56;
69
+ --pui-color-blue-700: #0c0b41;
70
+ --pui-color-red-100: #fce9e8;
71
+ --pui-color-red-200: #f9d3d2;
72
+ --pui-color-red-300: #ec6663;
73
+ --pui-color-red-400: #e42521;
74
+ --pui-color-red-500: #b61d1a;
75
+ --pui-color-red-600: #5b0e0d;
76
+ --pui-color-red-700: #440b09;
77
+ --pui-color-yellow-100: #fef9e9;
78
+ --pui-color-yellow-200: #fdf3d3;
79
+ --pui-color-yellow-300: #fad567;
80
+ --pui-color-yellow-400: #f9c426;
81
+ --pui-color-yellow-500: #c79c1e;
82
+ --pui-color-yellow-600: #634e0f;
83
+ --pui-color-yellow-700: #4a3a0b;
84
+ --pui-color-green-100: #d4f2de;
85
+ --pui-color-green-400: #74af36;
86
+ --pui-color-green-600: #1a6b36;
87
+ --pui-color-status-danger: #da4144;
88
+ --pui-color-light-blue-50: #fbfbfd;
89
+ --pui-color-light-blue-100: #f2f2f7;
90
+ --pui-color-gradient-stop-pink: #f24288;
91
+ --pui-color-gradient-stop-orchid: #ebb8fc;
92
+ --pui-color-gradient-stop-magenta: #d947d6;
93
+ --pui-color-alpha-neutral-800-50: #231b1b80;
94
+ --pui-color-alpha-white-8: #ffffff14;
95
+ --pui-color-alpha-white-16: #ffffff29;
96
+ --pui-color-alpha-black-7: #00000012;
97
+ --pui-color-alpha-grey-232-49: #e8e8e87d;
98
+ --pui-color-alpha-white-71: #ffffffb5;
99
+ --pui-gradient-blue: linear-gradient(112deg, #2B25D9 30.59%, #F24288 125.66%);
100
+ --pui-gradient-yellow: linear-gradient(311deg, #EBB8FC 19.79%, #F9C426 80.81%);
101
+ --pui-gradient-red: linear-gradient(101deg, #E42521 26.31%, #D947D6 99.31%);
102
+ --pui-space-2: 2px;
103
+ --pui-space-4: 4px;
104
+ --pui-space-8: 8px;
105
+ --pui-space-12: 12px;
106
+ --pui-space-16: 16px;
107
+ --pui-space-20: 20px;
108
+ --pui-space-24: 24px;
109
+ --pui-space-32: 32px;
110
+ --pui-space-40: 40px;
111
+ --pui-space-48: 48px;
112
+ --pui-space-64: 64px;
113
+ --pui-space-80: 80px;
114
+ --pui-radius-4: 4px;
115
+ --pui-radius-8: 8px;
116
+ --pui-radius-16: 16px;
117
+ --pui-radius-32: 32px;
118
+ --pui-radius-64: 64px;
119
+ --pui-radius-full: 9999px;
120
+ --pui-font-family-poppins: Poppins, sans-serif;
121
+ --pui-font-family-cyrillic: Onest, sans-serif;
122
+ --pui-font-weight-400: 400;
123
+ --pui-font-weight-500: 500;
124
+ --pui-font-weight-600: 600;
125
+ --pui-font-weight-700: 700;
126
+ --pui-font-size-12: 12px;
127
+ --pui-font-size-13: 13px;
128
+ --pui-font-size-14: 14px;
129
+ --pui-font-size-15: 15px;
130
+ --pui-font-size-16: 16px;
131
+ --pui-font-size-18: 18px;
132
+ --pui-font-size-20: 20px;
133
+ --pui-font-size-22: 22px;
134
+ --pui-font-size-24: 24px;
135
+ --pui-font-size-25: 25px;
136
+ --pui-font-size-26: 26px;
137
+ --pui-font-size-28: 28px;
138
+ --pui-font-size-32: 32px;
139
+ --pui-font-size-36: 36px;
140
+ --pui-font-size-40: 40px;
141
+ --pui-font-size-41: 41px;
142
+ --pui-font-size-45: 45px;
143
+ --pui-font-size-46: 46px;
144
+ --pui-font-size-48: 48px;
145
+ --pui-font-size-64: 64px;
146
+ --pui-font-size-65: 65px;
147
+ --pui-font-size-66: 66px;
148
+ --pui-font-size-92: 92px;
149
+ --pui-font-size-117: 117px;
150
+ --pui-font-size-148: 148px;
151
+ --pui-font-line-height-tight: 1.2;
152
+ --pui-font-line-height-normal: 1.4;
153
+ --pui-font-line-height-relaxed: 1.5;
154
+ --pui-font-line-height-loose: 1.7;
155
+ --pui-font-letter-spacing-normal: 0px;
156
+ --pui-font-letter-spacing-tight: -0.01em;
157
+ --pui-font-letter-spacing-wide: 0.06em;
158
+ --pui-font-letter-spacing-wider: 0.1em;
159
+ --pui-shadow-sm: 0px 1px 2px 0px #0000000d;
160
+ --pui-shadow-lg: 0px 24px 48px -12px #0000002e;
161
+ --pui-shadow-xl: 0px 24px 64px 0px #1510511f;
162
+ --pui-shadow-xxl: 0px 32px 64px 0px #00000024;
163
+ --pui-duration-instant: 50ms;
164
+ --pui-duration-fast: 150ms;
165
+ --pui-duration-medium: 200ms;
166
+ --pui-duration-slow: 250ms;
167
+ --pui-duration-slower: 300ms;
168
+ --pui-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
169
+ --pui-easing-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
170
+ --pui-size-icon-16: 16px;
171
+ --pui-size-icon-24: 24px;
172
+ --pui-size-icon-32: 32px;
173
+ --pui-size-icon-48: 48px;
174
+ --pui-size-control-small: 28px;
175
+ --pui-size-control-medium: 36px;
176
+ --pui-size-control-large: 44px;
177
+ --pui-breakpoint-tablet: 768px;
178
+ --pui-breakpoint-desktop: 1024px;
179
+ --pui-container-web: 1320px;
180
+ --pui-container-slide: 1792px;
181
+ --pui-canvas-slide-width: 1920px;
182
+ --pui-canvas-slide-height: 1080px;
183
+ --pui-canvas-slide-margin: 64px;
184
+ --pui-canvas-slide-margin-top: 42px;
185
+ --pui-blur-nav: 7.3px;
186
+ --pui-blur-panel: 14.6px;
187
+ --pui-blur-card: 6.8px;
188
+ --pui-blur-blob: 150px;
189
+ --pui-text-default: #0b0202;
190
+ --pui-text-muted: #544d4d;
191
+ --pui-text-subtle: #858080;
192
+ --pui-text-on-accent: #ffffff;
193
+ --pui-text-on-inverse: #ffffff;
194
+ --pui-text-link: #2b25d9;
195
+ --pui-text-disabled: #b5b3b3;
196
+ --pui-text-error: #e42521;
197
+ --pui-text-caption: #544d4d;
198
+ --pui-surface-page: #ffffff;
199
+ --pui-surface-card: #f2f2f7;
200
+ --pui-surface-sunken: #f2f2f2;
201
+ --pui-surface-inverse: #231b1b;
202
+ --pui-surface-slot: #ffffff;
203
+ --pui-surface-glass: #e8e8e87d;
204
+ --pui-surface-glass-strong: #ffffffb5;
205
+ --pui-ground-page-sunken: #f2f2f2;
206
+ --pui-ground-page-track: #f2f2f2;
207
+ --pui-ground-card-sunken: #dad9d9;
208
+ --pui-ground-card-track: #ffffff;
209
+ --pui-overlay-scrim: #231b1b80;
210
+ --pui-border-default: #dad9d9;
211
+ --pui-border-strong: #858080;
212
+ --pui-border-focus: #6a66e4;
213
+ --pui-border-error: #e42521;
214
+ --pui-action-primary-bg: #0b0202;
215
+ --pui-action-primary-bg-hover: #3b3333;
216
+ --pui-action-primary-fg: #ffffff;
217
+ --pui-action-secondary-bg: #ffffff;
218
+ --pui-action-secondary-bg-hover: #f2f2f2;
219
+ --pui-action-secondary-fg: #0b0202;
220
+ --pui-action-secondary-border: #dad9d9;
221
+ --pui-action-danger-bg: #e42521;
222
+ --pui-action-danger-bg-hover: #b61d1a;
223
+ --pui-action-danger-fg: #ffffff;
224
+ --pui-action-disabled-bg: #f2f2f2;
225
+ --pui-action-disabled-fg: #b5b3b3;
226
+ --pui-status-success-bg: #d4f2de;
227
+ --pui-status-success-fg: #1a6b36;
228
+ --pui-status-success-solid: #74af36;
229
+ --pui-status-danger-bg: #fce9e8;
230
+ --pui-status-danger-fg: #5b0e0d;
231
+ --pui-status-danger-solid: #da4144;
232
+ --pui-status-warning-bg: #fef9e9;
233
+ --pui-status-warning-fg: #634e0f;
234
+ --pui-status-warning-solid: #f9c426;
235
+ --pui-status-info-bg: #e9e9fb;
236
+ --pui-status-info-fg: #110e56;
237
+ --pui-status-info-solid: #2b25d9;
238
+ --pui-tint-neutral-bg: #dad9d9;
239
+ --pui-tint-neutral-fg: #544d4d;
240
+ --pui-tint-blue-bg: #d4d3f7;
241
+ --pui-tint-blue-fg: #6a66e4;
242
+ --pui-tint-red-bg: #f9d3d2;
243
+ --pui-tint-red-fg: #ec6663;
244
+ --pui-tint-yellow-bg: #fad567;
245
+ --pui-tint-yellow-fg: #634e0f;
246
+ --pui-tint-green-bg: #d4f2de;
247
+ --pui-tint-green-fg: #1a6b36;
248
+ --pui-elevation-flat: 0px 1px 2px 0px #0000000d;
249
+ --pui-elevation-card: 0px 24px 48px -12px #0000002e;
250
+ --pui-elevation-floating: 0px 24px 64px 0px #1510511f;
251
+ --pui-elevation-modal: 0px 32px 64px 0px #00000024;
252
+ --pui-motion-state: 150ms;
253
+ --pui-motion-move: 200ms;
254
+ --pui-motion-menu: 250ms;
255
+ --pui-motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
256
+ --pui-motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
257
+ --pui-layout-gutter: 24px;
258
+ --pui-layout-section-gap: 32px;
259
+ --pui-layout-heading-gap: 64px;
260
+ --pui-layout-card-padding: 20px;
261
+ --pui-layout-card-gap: 12px;
262
+ --pui-layout-bullet-gap: 8px;
263
+ --pui-layout-content-width: 1320px;
264
+ --pui-layout-slide-margin: 64px;
265
+ --pui-chart-text: #0b0202;
266
+ --pui-chart-grid: #00000012;
267
+ --pui-chart-rest: #dad9d9;
268
+ --pui-chart-on-fill: #ffffff;
269
+
270
+ /* Typography: web-desktop is the default canvas. */
271
+ --pui-type-display-large-font-family: Poppins, sans-serif;
272
+ --pui-type-display-large-font-size: 148px;
273
+ --pui-type-display-large-font-weight: 600;
274
+ --pui-type-display-large-line-height: 1.2;
275
+ --pui-type-display-large-letter-spacing: -0.01em;
276
+ --pui-type-display-medium-font-family: Poppins, sans-serif;
277
+ --pui-type-display-medium-font-size: 117px;
278
+ --pui-type-display-medium-font-weight: 600;
279
+ --pui-type-display-medium-line-height: 1.2;
280
+ --pui-type-display-medium-letter-spacing: -0.01em;
281
+ --pui-type-display-small-font-family: Poppins, sans-serif;
282
+ --pui-type-display-small-font-size: 92px;
283
+ --pui-type-display-small-font-weight: 600;
284
+ --pui-type-display-small-line-height: 1.2;
285
+ --pui-type-display-small-letter-spacing: -0.01em;
286
+ --pui-type-headline-large-font-family: Poppins, sans-serif;
287
+ --pui-type-headline-large-font-size: 65px;
288
+ --pui-type-headline-large-font-weight: 600;
289
+ --pui-type-headline-large-line-height: 1.2;
290
+ --pui-type-headline-large-letter-spacing: 0px;
291
+ --pui-type-headline-medium-font-family: Poppins, sans-serif;
292
+ --pui-type-headline-medium-font-size: 45px;
293
+ --pui-type-headline-medium-font-weight: 600;
294
+ --pui-type-headline-medium-line-height: 1.2;
295
+ --pui-type-headline-medium-letter-spacing: 0px;
296
+ --pui-type-headline-small-font-family: Poppins, sans-serif;
297
+ --pui-type-headline-small-font-size: 40px;
298
+ --pui-type-headline-small-font-weight: 400;
299
+ --pui-type-headline-small-line-height: 1.2;
300
+ --pui-type-headline-small-letter-spacing: 0px;
301
+ --pui-type-title-large-font-family: Poppins, sans-serif;
302
+ --pui-type-title-large-font-size: 36px;
303
+ --pui-type-title-large-font-weight: 600;
304
+ --pui-type-title-large-line-height: 1.2;
305
+ --pui-type-title-large-letter-spacing: 0px;
306
+ --pui-type-title-medium-font-family: Poppins, sans-serif;
307
+ --pui-type-title-medium-font-size: 32px;
308
+ --pui-type-title-medium-font-weight: 600;
309
+ --pui-type-title-medium-line-height: 1.2;
310
+ --pui-type-title-medium-letter-spacing: 0px;
311
+ --pui-type-title-small-font-family: Poppins, sans-serif;
312
+ --pui-type-title-small-font-size: 28px;
313
+ --pui-type-title-small-font-weight: 500;
314
+ --pui-type-title-small-line-height: 1.4;
315
+ --pui-type-title-small-letter-spacing: 0px;
316
+ --pui-type-body-large-font-family: Poppins, sans-serif;
317
+ --pui-type-body-large-font-size: 22px;
318
+ --pui-type-body-large-font-weight: 400;
319
+ --pui-type-body-large-line-height: 1.4;
320
+ --pui-type-body-large-letter-spacing: 0px;
321
+ --pui-type-body-medium-font-family: Poppins, sans-serif;
322
+ --pui-type-body-medium-font-size: 18px;
323
+ --pui-type-body-medium-font-weight: 400;
324
+ --pui-type-body-medium-line-height: 1.4;
325
+ --pui-type-body-medium-letter-spacing: 0px;
326
+ --pui-type-body-small-font-family: Poppins, sans-serif;
327
+ --pui-type-body-small-font-size: 16px;
328
+ --pui-type-body-small-font-weight: 400;
329
+ --pui-type-body-small-line-height: 1.5;
330
+ --pui-type-body-small-letter-spacing: 0px;
331
+ --pui-type-body-x-small-font-family: Poppins, sans-serif;
332
+ --pui-type-body-x-small-font-size: 14px;
333
+ --pui-type-body-x-small-font-weight: 400;
334
+ --pui-type-body-x-small-line-height: 1.7;
335
+ --pui-type-body-x-small-letter-spacing: 0px;
336
+ --pui-type-label-medium-font-family: Poppins, sans-serif;
337
+ --pui-type-label-medium-font-size: 12px;
338
+ --pui-type-label-medium-font-weight: 500;
339
+ --pui-type-label-medium-line-height: 1.4;
340
+ --pui-type-label-medium-letter-spacing: 0.1em;
341
+ }
342
+
343
+ /* Accent modes. Paggy's data-accent system, promoted to the token source.
344
+ Set data-accent on any element and every --pui-accent-* below re-resolves. */
345
+
346
+ [data-accent="blue"] {
347
+ --pui-accent-main: #2b25d9;
348
+ --pui-accent-light: #6a66e4;
349
+ --pui-accent-lighter: #d4d3f7;
350
+ --pui-accent-bg: #e9e9fb;
351
+ --pui-accent-dark: #0c0b41;
352
+ --pui-accent-on-accent: #ffffff;
353
+ --pui-accent-heading: #6a66e4;
354
+ --pui-accent-icon-ink: #6a66e4;
355
+ --pui-accent-text: #2b25d9;
356
+ --pui-accent-selected: #e9e9fb;
357
+ --pui-accent-pill-tint: #d4d3f7;
358
+ --pui-accent-chart-1: #2b25d9;
359
+ --pui-accent-chart-2: #6a66e4;
360
+ --pui-accent-chart-3: #d4d3f7;
361
+ --pui-accent-chart-4: #b5b3b3;
362
+ --pui-accent-chart-5: #dad9d9;
363
+ --pui-accent-gradient-far: #f24288;
364
+ --pui-accent-blob-opacity: 0.2;
365
+ --pui-icon-list-ink: #6a66e4;
366
+ --pui-table-header-bg: #0c0b41;
367
+ --pui-table-header-pill-tint: #d4d3f7;
368
+ --pui-table-row-selected-bg: #e9e9fb;
369
+ }
370
+
371
+ [data-accent="red"] {
372
+ --pui-accent-main: #e42521;
373
+ --pui-accent-light: #ec6663;
374
+ --pui-accent-lighter: #f9d3d2;
375
+ --pui-accent-bg: #fce9e8;
376
+ --pui-accent-dark: #440b09;
377
+ --pui-accent-on-accent: #ffffff;
378
+ --pui-accent-heading: #ec6663;
379
+ --pui-accent-icon-ink: #ec6663;
380
+ --pui-accent-text: #e42521;
381
+ --pui-accent-selected: #fce9e8;
382
+ --pui-accent-pill-tint: #f9d3d2;
383
+ --pui-accent-chart-1: #e42521;
384
+ --pui-accent-chart-2: #ec6663;
385
+ --pui-accent-chart-3: #f9d3d2;
386
+ --pui-accent-chart-4: #b5b3b3;
387
+ --pui-accent-chart-5: #dad9d9;
388
+ --pui-accent-gradient-far: #d947d6;
389
+ --pui-accent-blob-opacity: 0.2;
390
+ --pui-icon-list-ink: #ec6663;
391
+ --pui-table-header-bg: #440b09;
392
+ --pui-table-header-pill-tint: #f9d3d2;
393
+ --pui-table-row-selected-bg: #fce9e8;
394
+ }
395
+
396
+ [data-accent="yellow"] {
397
+ --pui-accent-main: #f9c426;
398
+ --pui-accent-light: #fad567;
399
+ --pui-accent-lighter: #fdf3d3;
400
+ --pui-accent-bg: #fef9e9;
401
+ --pui-accent-dark: #4a3a0b;
402
+ --pui-accent-on-accent: #0b0202;
403
+ --pui-accent-heading: #858080;
404
+ --pui-accent-icon-ink: #f9c426;
405
+ --pui-accent-text: #0b0202;
406
+ --pui-accent-selected: #fef9e9;
407
+ --pui-accent-pill-tint: #fad567;
408
+ --pui-accent-chart-1: #f9c426;
409
+ --pui-accent-chart-2: #858080;
410
+ --pui-accent-chart-3: #dad9d9;
411
+ --pui-accent-chart-4: #fad567;
412
+ --pui-accent-chart-5: #b5b3b3;
413
+ --pui-accent-gradient-far: #ebb8fc;
414
+ --pui-accent-blob-opacity: 0.35;
415
+ --pui-icon-list-ink: #f9c426;
416
+ --pui-table-header-bg: #4a3a0b;
417
+ --pui-table-header-pill-tint: #fad567;
418
+ --pui-table-row-selected-bg: #fef9e9;
419
+ }
420
+
421
+ [data-accent="multicolor"] {
422
+ --pui-accent-main: #e42521;
423
+ --pui-accent-light: #ec6663;
424
+ --pui-accent-lighter: #f9d3d2;
425
+ --pui-accent-bg: #fce9e8;
426
+ --pui-accent-dark: #231b1b;
427
+ --pui-accent-on-accent: #ffffff;
428
+ --pui-accent-heading: #858080;
429
+ --pui-accent-icon-ink: #ec6663;
430
+ --pui-accent-text: #e42521;
431
+ --pui-accent-selected: #dad9d9;
432
+ --pui-accent-pill-tint: #dad9d9;
433
+ --pui-accent-chart-1: #e42521;
434
+ --pui-accent-chart-2: #f9c426;
435
+ --pui-accent-chart-3: #2b25d9;
436
+ --pui-accent-chart-4: #b5b3b3;
437
+ --pui-accent-chart-5: #ec6663;
438
+ --pui-accent-gradient-far: #d947d6;
439
+ --pui-accent-blob-opacity: 0.2;
440
+ --pui-icon-list-ink: #ec6663;
441
+ --pui-table-header-bg: #231b1b;
442
+ --pui-table-header-pill-tint: #dad9d9;
443
+ --pui-table-row-selected-bg: #dad9d9;
444
+ }
445
+
446
+ /* Ground modes. A grey surface is one step darker than the ground it sits on: neutral/100 on the white
447
+ page, neutral/200 on the product ground surface/card; the segmented Tabs' box is white there.
448
+ Set data-ground="card" on the element that paints surface/card as the ground of a screen and every
449
+ role below re-resolves for what sits on it; data-ground="page" on a white container inside it puts
450
+ them back. The parts of @pepperui/css that paint a ground set the same values themselves. */
451
+
452
+ [data-ground="page"] {
453
+ --pui-tabs-track: #f2f2f2;
454
+ --pui-kpi-tone-neutral-bg: #f2f2f2;
455
+ --pui-surface-sunken: #f2f2f2;
456
+ }
457
+
458
+ [data-ground="card"] {
459
+ --pui-tabs-track: #ffffff;
460
+ --pui-kpi-tone-neutral-bg: #dad9d9;
461
+ --pui-surface-sunken: #dad9d9;
462
+ }
463
+
464
+ /* Canvas modes. The slide canvas is fixed at 1920x1080 and never responsive,
465
+ so it is opted into explicitly rather than reached by a breakpoint. */
466
+
467
+ [data-canvas="slide"] {
468
+ --pui-type-display-small-font-family: Poppins, sans-serif;
469
+ --pui-type-display-small-font-size: 64px;
470
+ --pui-type-display-small-font-weight: 600;
471
+ --pui-type-display-small-line-height: 1.2;
472
+ --pui-type-display-small-letter-spacing: 0px;
473
+ --pui-type-headline-large-font-family: Poppins, sans-serif;
474
+ --pui-type-headline-large-font-size: 66px;
475
+ --pui-type-headline-large-font-weight: 600;
476
+ --pui-type-headline-large-line-height: 1.2;
477
+ --pui-type-headline-large-letter-spacing: -0.01em;
478
+ --pui-type-headline-medium-font-family: Poppins, sans-serif;
479
+ --pui-type-headline-medium-font-size: 46px;
480
+ --pui-type-headline-medium-font-weight: 500;
481
+ --pui-type-headline-medium-line-height: 1.2;
482
+ --pui-type-headline-medium-letter-spacing: -0.01em;
483
+ --pui-type-headline-small-font-family: Poppins, sans-serif;
484
+ --pui-type-headline-small-font-size: 41px;
485
+ --pui-type-headline-small-font-weight: 400;
486
+ --pui-type-headline-small-line-height: 1.5;
487
+ --pui-type-headline-small-letter-spacing: 0px;
488
+ --pui-type-title-large-font-family: Poppins, sans-serif;
489
+ --pui-type-title-large-font-size: 36px;
490
+ --pui-type-title-large-font-weight: 600;
491
+ --pui-type-title-large-line-height: 1.2;
492
+ --pui-type-title-large-letter-spacing: 0px;
493
+ --pui-type-title-small-font-family: Poppins, sans-serif;
494
+ --pui-type-title-small-font-size: 26px;
495
+ --pui-type-title-small-font-weight: 500;
496
+ --pui-type-title-small-line-height: 1.4;
497
+ --pui-type-title-small-letter-spacing: 0px;
498
+ --pui-type-body-large-font-family: Poppins, sans-serif;
499
+ --pui-type-body-large-font-size: 26px;
500
+ --pui-type-body-large-font-weight: 400;
501
+ --pui-type-body-large-line-height: 1.4;
502
+ --pui-type-body-large-letter-spacing: 0px;
503
+ --pui-type-body-medium-font-family: Poppins, sans-serif;
504
+ --pui-type-body-medium-font-size: 20px;
505
+ --pui-type-body-medium-font-weight: 400;
506
+ --pui-type-body-medium-line-height: 1.4;
507
+ --pui-type-body-medium-letter-spacing: 0px;
508
+ --pui-type-body-small-font-family: Poppins, sans-serif;
509
+ --pui-type-body-small-font-size: 18px;
510
+ --pui-type-body-small-font-weight: 500;
511
+ --pui-type-body-small-line-height: 1.4;
512
+ --pui-type-body-small-letter-spacing: 0px;
513
+ --pui-type-label-medium-font-family: Poppins, sans-serif;
514
+ --pui-type-label-medium-font-size: 15px;
515
+ --pui-type-label-medium-font-weight: 400;
516
+ --pui-type-label-medium-line-height: 1.4;
517
+ --pui-type-label-medium-letter-spacing: 0px;
518
+ }
519
+
520
+ @media (max-width: 767px) {
521
+ :root {
522
+ --pui-type-headline-large-font-family: Poppins, sans-serif;
523
+ --pui-type-headline-large-font-size: 48px;
524
+ --pui-type-headline-large-font-weight: 600;
525
+ --pui-type-headline-large-line-height: 1.2;
526
+ --pui-type-headline-large-letter-spacing: 0px;
527
+ --pui-type-headline-medium-font-family: Poppins, sans-serif;
528
+ --pui-type-headline-medium-font-size: 40px;
529
+ --pui-type-headline-medium-font-weight: 600;
530
+ --pui-type-headline-medium-line-height: 1.2;
531
+ --pui-type-headline-medium-letter-spacing: 0px;
532
+ --pui-type-headline-small-font-family: Poppins, sans-serif;
533
+ --pui-type-headline-small-font-size: 32px;
534
+ --pui-type-headline-small-font-weight: 400;
535
+ --pui-type-headline-small-line-height: 1.2;
536
+ --pui-type-headline-small-letter-spacing: 0px;
537
+ --pui-type-title-large-font-family: Poppins, sans-serif;
538
+ --pui-type-title-large-font-size: 32px;
539
+ --pui-type-title-large-font-weight: 600;
540
+ --pui-type-title-large-line-height: 1.2;
541
+ --pui-type-title-large-letter-spacing: 0px;
542
+ --pui-type-title-medium-font-family: Poppins, sans-serif;
543
+ --pui-type-title-medium-font-size: 28px;
544
+ --pui-type-title-medium-font-weight: 600;
545
+ --pui-type-title-medium-line-height: 1.2;
546
+ --pui-type-title-medium-letter-spacing: 0px;
547
+ --pui-type-title-small-font-family: Poppins, sans-serif;
548
+ --pui-type-title-small-font-size: 25px;
549
+ --pui-type-title-small-font-weight: 500;
550
+ --pui-type-title-small-line-height: 1.4;
551
+ --pui-type-title-small-letter-spacing: 0px;
552
+ --pui-type-body-large-font-family: Poppins, sans-serif;
553
+ --pui-type-body-large-font-size: 18px;
554
+ --pui-type-body-large-font-weight: 400;
555
+ --pui-type-body-large-line-height: 1.4;
556
+ --pui-type-body-large-letter-spacing: 0px;
557
+ --pui-type-body-medium-font-family: Poppins, sans-serif;
558
+ --pui-type-body-medium-font-size: 16px;
559
+ --pui-type-body-medium-font-weight: 400;
560
+ --pui-type-body-medium-line-height: 1.4;
561
+ --pui-type-body-medium-letter-spacing: 0px;
562
+ --pui-type-body-small-font-family: Poppins, sans-serif;
563
+ --pui-type-body-small-font-size: 14px;
564
+ --pui-type-body-small-font-weight: 400;
565
+ --pui-type-body-small-line-height: 1.5;
566
+ --pui-type-body-small-letter-spacing: 0px;
567
+ --pui-type-body-x-small-font-family: Poppins, sans-serif;
568
+ --pui-type-body-x-small-font-size: 12px;
569
+ --pui-type-body-x-small-font-weight: 400;
570
+ --pui-type-body-x-small-line-height: 1.7;
571
+ --pui-type-body-x-small-letter-spacing: 0px;
572
+ }
573
+ }
package/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "@pepperui/tokens",
3
+ "version": "1.2.0",
4
+ "description": "Pepper UI design tokens — the Mobupps design system. One source, seven outputs: CSS, SCSS, a Tailwind v3 preset, a Tailwind v4 theme, the shadcn variable map, Figma-import JSON and a Python module.",
5
+ "license": "UNLICENSED",
6
+ "private": false,
7
+ "type": "module",
8
+ "files": ["dist", "!dist/__pycache__", "README.md"],
9
+ "main": "./dist/tailwind.js",
10
+ "exports": {
11
+ "./css": "./dist/tokens.css",
12
+ "./scss": "./dist/_tokens.scss",
13
+ "./tailwind": "./dist/tailwind.js",
14
+ "./tailwind.css": "./dist/tailwind.css",
15
+ "./shadcn": "./dist/shadcn.css",
16
+ "./shadcn.css": "./dist/shadcn.css",
17
+ "./figma": "./dist/figma.json",
18
+ "./python": "./dist/pepper_tokens.py",
19
+ ".": "./dist/tailwind.js"
20
+ },
21
+ "publishConfig": { "access": "public" },
22
+ "repository": { "type": "git", "url": "git+ssh://git@bitbucket.org/rashidmobupps/pepper-ui.git", "directory": "packages/tokens" },
23
+ "keywords": ["design-tokens", "design-system", "dtcg", "mobupps", "pepper-ui"]
24
+ }