@pepperui/tokens 1.2.1 → 1.4.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.
- package/dist/_tokens.scss +33 -0
- package/dist/figma.json +486 -20
- package/dist/pepper_tokens.py +124 -7
- package/dist/tailwind.css +16 -0
- package/dist/tailwind.js +23 -4
- package/dist/tokens.css +90 -0
- package/package.json +1 -1
package/dist/pepper_tokens.py
CHANGED
|
@@ -107,6 +107,15 @@ TOKENS = {
|
|
|
107
107
|
"length": 5,
|
|
108
108
|
"angle": 40
|
|
109
109
|
}
|
|
110
|
+
},
|
|
111
|
+
"chrome": {
|
|
112
|
+
"bar": "#2c2c2c",
|
|
113
|
+
"line": "#1a1a1a",
|
|
114
|
+
"well": "#3d3d3d",
|
|
115
|
+
"text": "#888888",
|
|
116
|
+
"light-red": "#ff5f57",
|
|
117
|
+
"light-amber": "#febc2e",
|
|
118
|
+
"light-green": "#28c840"
|
|
110
119
|
}
|
|
111
120
|
},
|
|
112
121
|
"color": {
|
|
@@ -165,7 +174,10 @@ TOKENS = {
|
|
|
165
174
|
"gradient-stop": {
|
|
166
175
|
"pink": "#f24288",
|
|
167
176
|
"orchid": "#ebb8fc",
|
|
168
|
-
"magenta": "#d947d6"
|
|
177
|
+
"magenta": "#d947d6",
|
|
178
|
+
"indigo": "#4a3df0",
|
|
179
|
+
"violet": "#6e3df0",
|
|
180
|
+
"purple": "#b03fe0"
|
|
169
181
|
},
|
|
170
182
|
"alpha": {
|
|
171
183
|
"neutral-800-50": "#231b1b80",
|
|
@@ -173,13 +185,27 @@ TOKENS = {
|
|
|
173
185
|
"white-16": "#ffffff29",
|
|
174
186
|
"black-7": "#00000012",
|
|
175
187
|
"grey-232-49": "#e8e8e87d",
|
|
176
|
-
"white-71": "#ffffffb5"
|
|
188
|
+
"white-71": "#ffffffb5",
|
|
189
|
+
"black-64": "#000000a3",
|
|
190
|
+
"black-84": "#000000d6",
|
|
191
|
+
"white-10": "#ffffff1a",
|
|
192
|
+
"black-14": "#00000024"
|
|
193
|
+
},
|
|
194
|
+
"chrome": {
|
|
195
|
+
"bar": "#2c2c2c",
|
|
196
|
+
"line": "#1a1a1a",
|
|
197
|
+
"well": "#3d3d3d",
|
|
198
|
+
"text": "#888888",
|
|
199
|
+
"light-red": "#ff5f57",
|
|
200
|
+
"light-amber": "#febc2e",
|
|
201
|
+
"light-green": "#28c840"
|
|
177
202
|
}
|
|
178
203
|
},
|
|
179
204
|
"gradient": {
|
|
180
205
|
"blue": "linear-gradient(112deg, #2B25D9 30.59%, #F24288 125.66%)",
|
|
181
206
|
"yellow": "linear-gradient(311deg, #EBB8FC 19.79%, #F9C426 80.81%)",
|
|
182
|
-
"red": "linear-gradient(101deg, #E42521 26.31%, #D947D6 99.31%)"
|
|
207
|
+
"red": "linear-gradient(101deg, #E42521 26.31%, #D947D6 99.31%)",
|
|
208
|
+
"violet": "linear-gradient(135deg, #4A3DF0 0%, #6E3DF0 50%, #B03FE0 100%)"
|
|
183
209
|
},
|
|
184
210
|
"space": {
|
|
185
211
|
"2": "2px",
|
|
@@ -258,7 +284,8 @@ TOKENS = {
|
|
|
258
284
|
"sm": "0px 1px 2px 0px #0000000d",
|
|
259
285
|
"lg": "0px 24px 48px -12px #0000002e",
|
|
260
286
|
"xl": "0px 24px 64px 0px #1510511f",
|
|
261
|
-
"xxl": "0px 32px 64px 0px #00000024"
|
|
287
|
+
"xxl": "0px 32px 64px 0px #00000024",
|
|
288
|
+
"xxl-soft": "0px 32px 64px -12px #00000024"
|
|
262
289
|
},
|
|
263
290
|
"duration": {
|
|
264
291
|
"instant": "50ms",
|
|
@@ -302,7 +329,8 @@ TOKENS = {
|
|
|
302
329
|
"nav": "7.3px",
|
|
303
330
|
"panel": "14.6px",
|
|
304
331
|
"card": "6.8px",
|
|
305
|
-
"blob": "150px"
|
|
332
|
+
"blob": "150px",
|
|
333
|
+
"control": "8px"
|
|
306
334
|
},
|
|
307
335
|
"text": {
|
|
308
336
|
"default": "#0b0202",
|
|
@@ -322,7 +350,9 @@ TOKENS = {
|
|
|
322
350
|
"inverse": "#231b1b",
|
|
323
351
|
"slot": "#ffffff",
|
|
324
352
|
"glass": "#e8e8e87d",
|
|
325
|
-
"glass-strong": "#ffffffb5"
|
|
353
|
+
"glass-strong": "#ffffffb5",
|
|
354
|
+
"glass-dark": "#000000a3",
|
|
355
|
+
"glass-dark-strong": "#000000d6"
|
|
326
356
|
},
|
|
327
357
|
"ground": {
|
|
328
358
|
"page": {
|
|
@@ -503,7 +533,8 @@ TOKENS = {
|
|
|
503
533
|
"flat": "0px 1px 2px 0px #0000000d",
|
|
504
534
|
"card": "0px 24px 48px -12px #0000002e",
|
|
505
535
|
"floating": "0px 24px 64px 0px #1510511f",
|
|
506
|
-
"modal": "0px 32px 64px 0px #00000024"
|
|
536
|
+
"modal": "0px 32px 64px 0px #00000024",
|
|
537
|
+
"bar": "0px 32px 64px 0px #00000024"
|
|
507
538
|
},
|
|
508
539
|
"motion": {
|
|
509
540
|
"state": "150ms",
|
|
@@ -528,6 +559,14 @@ TOKENS = {
|
|
|
528
559
|
"rest": "#dad9d9",
|
|
529
560
|
"on-fill": "#ffffff"
|
|
530
561
|
},
|
|
562
|
+
"sequence": {
|
|
563
|
+
"1": "#e42521",
|
|
564
|
+
"2": "#f9c426",
|
|
565
|
+
"3": "#2b25d9",
|
|
566
|
+
"4": "#6a66e4",
|
|
567
|
+
"5": "#858080",
|
|
568
|
+
"6": "#ec6663"
|
|
569
|
+
},
|
|
531
570
|
"type": {
|
|
532
571
|
"web-desktop": {
|
|
533
572
|
"display": {
|
|
@@ -639,6 +678,84 @@ TOKENS = {
|
|
|
639
678
|
}
|
|
640
679
|
}
|
|
641
680
|
},
|
|
681
|
+
"web-tablet": {
|
|
682
|
+
"headline": {
|
|
683
|
+
"large": {
|
|
684
|
+
"fontFamily": "Poppins, sans-serif",
|
|
685
|
+
"fontSize": "65px",
|
|
686
|
+
"fontWeight": 600,
|
|
687
|
+
"lineHeight": 1.2,
|
|
688
|
+
"letterSpacing": "0px"
|
|
689
|
+
},
|
|
690
|
+
"medium": {
|
|
691
|
+
"fontFamily": "Poppins, sans-serif",
|
|
692
|
+
"fontSize": "45px",
|
|
693
|
+
"fontWeight": 600,
|
|
694
|
+
"lineHeight": 1.2,
|
|
695
|
+
"letterSpacing": "0px"
|
|
696
|
+
},
|
|
697
|
+
"small": {
|
|
698
|
+
"fontFamily": "Poppins, sans-serif",
|
|
699
|
+
"fontSize": "40px",
|
|
700
|
+
"fontWeight": 400,
|
|
701
|
+
"lineHeight": 1.2,
|
|
702
|
+
"letterSpacing": "0px"
|
|
703
|
+
}
|
|
704
|
+
},
|
|
705
|
+
"title": {
|
|
706
|
+
"large": {
|
|
707
|
+
"fontFamily": "Poppins, sans-serif",
|
|
708
|
+
"fontSize": "32px",
|
|
709
|
+
"fontWeight": 600,
|
|
710
|
+
"lineHeight": 1.2,
|
|
711
|
+
"letterSpacing": "0px"
|
|
712
|
+
},
|
|
713
|
+
"medium": {
|
|
714
|
+
"fontFamily": "Poppins, sans-serif",
|
|
715
|
+
"fontSize": "28px",
|
|
716
|
+
"fontWeight": 600,
|
|
717
|
+
"lineHeight": 1.2,
|
|
718
|
+
"letterSpacing": "0px"
|
|
719
|
+
},
|
|
720
|
+
"small": {
|
|
721
|
+
"fontFamily": "Poppins, sans-serif",
|
|
722
|
+
"fontSize": "25px",
|
|
723
|
+
"fontWeight": 500,
|
|
724
|
+
"lineHeight": 1.4,
|
|
725
|
+
"letterSpacing": "0px"
|
|
726
|
+
}
|
|
727
|
+
},
|
|
728
|
+
"body": {
|
|
729
|
+
"large": {
|
|
730
|
+
"fontFamily": "Poppins, sans-serif",
|
|
731
|
+
"fontSize": "18px",
|
|
732
|
+
"fontWeight": 400,
|
|
733
|
+
"lineHeight": 1.4,
|
|
734
|
+
"letterSpacing": "0px"
|
|
735
|
+
},
|
|
736
|
+
"medium": {
|
|
737
|
+
"fontFamily": "Poppins, sans-serif",
|
|
738
|
+
"fontSize": "16px",
|
|
739
|
+
"fontWeight": 400,
|
|
740
|
+
"lineHeight": 1.4,
|
|
741
|
+
"letterSpacing": "0px"
|
|
742
|
+
},
|
|
743
|
+
"small": {
|
|
744
|
+
"fontFamily": "Poppins, sans-serif",
|
|
745
|
+
"fontSize": "14px",
|
|
746
|
+
"fontWeight": 400,
|
|
747
|
+
"lineHeight": 1.5,
|
|
748
|
+
"letterSpacing": "0px"
|
|
749
|
+
},
|
|
750
|
+
"x-small": {
|
|
751
|
+
"fontFamily": "Poppins, sans-serif",
|
|
752
|
+
"fontSize": "12px",
|
|
753
|
+
"fontWeight": 400,
|
|
754
|
+
"lineHeight": 1.7,
|
|
755
|
+
"letterSpacing": "0px"
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
},
|
|
642
759
|
"web-mobile": {
|
|
643
760
|
"headline": {
|
|
644
761
|
"large": {
|
package/dist/tailwind.css
CHANGED
|
@@ -47,6 +47,13 @@
|
|
|
47
47
|
--color-pui-illustration-outline-color: var(--pui-illustration-outline-color);
|
|
48
48
|
--color-pui-illustration-connector-color: var(--pui-illustration-connector-color);
|
|
49
49
|
--color-pui-illustration-arrow-color: var(--pui-illustration-arrow-color);
|
|
50
|
+
--color-pui-illustration-chrome-bar: var(--pui-illustration-chrome-bar);
|
|
51
|
+
--color-pui-illustration-chrome-line: var(--pui-illustration-chrome-line);
|
|
52
|
+
--color-pui-illustration-chrome-well: var(--pui-illustration-chrome-well);
|
|
53
|
+
--color-pui-illustration-chrome-text: var(--pui-illustration-chrome-text);
|
|
54
|
+
--color-pui-illustration-chrome-light-red: var(--pui-illustration-chrome-light-red);
|
|
55
|
+
--color-pui-illustration-chrome-light-amber: var(--pui-illustration-chrome-light-amber);
|
|
56
|
+
--color-pui-illustration-chrome-light-green: var(--pui-illustration-chrome-light-green);
|
|
50
57
|
--color-pui-text-default: var(--pui-text-default);
|
|
51
58
|
--color-pui-text-muted: var(--pui-text-muted);
|
|
52
59
|
--color-pui-text-subtle: var(--pui-text-subtle);
|
|
@@ -63,6 +70,8 @@
|
|
|
63
70
|
--color-pui-surface-slot: var(--pui-surface-slot);
|
|
64
71
|
--color-pui-surface-glass: var(--pui-surface-glass);
|
|
65
72
|
--color-pui-surface-glass-strong: var(--pui-surface-glass-strong);
|
|
73
|
+
--color-pui-surface-glass-dark: var(--pui-surface-glass-dark);
|
|
74
|
+
--color-pui-surface-glass-dark-strong: var(--pui-surface-glass-dark-strong);
|
|
66
75
|
--color-pui-overlay-scrim: var(--pui-overlay-scrim);
|
|
67
76
|
--color-pui-border-default: var(--pui-border-default);
|
|
68
77
|
--color-pui-border-strong: var(--pui-border-strong);
|
|
@@ -123,6 +132,12 @@
|
|
|
123
132
|
--color-pui-chart-grid: var(--pui-chart-grid);
|
|
124
133
|
--color-pui-chart-rest: var(--pui-chart-rest);
|
|
125
134
|
--color-pui-chart-on-fill: var(--pui-chart-on-fill);
|
|
135
|
+
--color-pui-sequence-1: var(--pui-sequence-1);
|
|
136
|
+
--color-pui-sequence-2: var(--pui-sequence-2);
|
|
137
|
+
--color-pui-sequence-3: var(--pui-sequence-3);
|
|
138
|
+
--color-pui-sequence-4: var(--pui-sequence-4);
|
|
139
|
+
--color-pui-sequence-5: var(--pui-sequence-5);
|
|
140
|
+
--color-pui-sequence-6: var(--pui-sequence-6);
|
|
126
141
|
|
|
127
142
|
/* Spacing steps — p-pui-8, gap-pui-16, w-pui-24 */
|
|
128
143
|
--spacing-pui-2: var(--pui-space-2);
|
|
@@ -200,6 +215,7 @@
|
|
|
200
215
|
--shadow-pui-card: var(--pui-elevation-card);
|
|
201
216
|
--shadow-pui-floating: var(--pui-elevation-floating);
|
|
202
217
|
--shadow-pui-modal: var(--pui-elevation-modal);
|
|
218
|
+
--shadow-pui-bar: var(--pui-elevation-bar);
|
|
203
219
|
|
|
204
220
|
/* Motion — ease-pui-standard. Durations are not a theme namespace: duration-[var(--pui-motion-state)] */
|
|
205
221
|
--ease-pui-standard: var(--pui-easing-standard);
|
package/dist/tailwind.js
CHANGED
|
@@ -78,7 +78,10 @@ export default {
|
|
|
78
78
|
"gradient-stop": {
|
|
79
79
|
"pink": "#f24288",
|
|
80
80
|
"orchid": "#ebb8fc",
|
|
81
|
-
"magenta": "#d947d6"
|
|
81
|
+
"magenta": "#d947d6",
|
|
82
|
+
"indigo": "#4a3df0",
|
|
83
|
+
"violet": "#6e3df0",
|
|
84
|
+
"purple": "#b03fe0"
|
|
82
85
|
},
|
|
83
86
|
"alpha": {
|
|
84
87
|
"neutral-800-50": "#231b1b80",
|
|
@@ -86,7 +89,20 @@ export default {
|
|
|
86
89
|
"white-16": "#ffffff29",
|
|
87
90
|
"black-7": "#00000012",
|
|
88
91
|
"grey-232-49": "#e8e8e87d",
|
|
89
|
-
"white-71": "#ffffffb5"
|
|
92
|
+
"white-71": "#ffffffb5",
|
|
93
|
+
"black-64": "#000000a3",
|
|
94
|
+
"black-84": "#000000d6",
|
|
95
|
+
"white-10": "#ffffff1a",
|
|
96
|
+
"black-14": "#00000024"
|
|
97
|
+
},
|
|
98
|
+
"chrome": {
|
|
99
|
+
"bar": "#2c2c2c",
|
|
100
|
+
"line": "#1a1a1a",
|
|
101
|
+
"well": "#3d3d3d",
|
|
102
|
+
"text": "#888888",
|
|
103
|
+
"light-red": "#ff5f57",
|
|
104
|
+
"light-amber": "#febc2e",
|
|
105
|
+
"light-green": "#28c840"
|
|
90
106
|
},
|
|
91
107
|
"text": {
|
|
92
108
|
"default": "#0b0202",
|
|
@@ -106,7 +122,9 @@ export default {
|
|
|
106
122
|
"inverse": "#231b1b",
|
|
107
123
|
"slot": "#ffffff",
|
|
108
124
|
"glass": "#e8e8e87d",
|
|
109
|
-
"glass-strong": "#ffffffb5"
|
|
125
|
+
"glass-strong": "#ffffffb5",
|
|
126
|
+
"glass-dark": "#000000a3",
|
|
127
|
+
"glass-dark-strong": "#000000d6"
|
|
110
128
|
},
|
|
111
129
|
"border": {
|
|
112
130
|
"default": "#dad9d9",
|
|
@@ -196,7 +214,8 @@ export default {
|
|
|
196
214
|
"sm": "0px 1px 2px 0px #0000000d",
|
|
197
215
|
"lg": "0px 24px 48px -12px #0000002e",
|
|
198
216
|
"xl": "0px 24px 64px 0px #1510511f",
|
|
199
|
-
"xxl": "0px 32px 64px 0px #00000024"
|
|
217
|
+
"xxl": "0px 32px 64px 0px #00000024",
|
|
218
|
+
"xxl-soft": "0px 32px 64px -12px #00000024"
|
|
200
219
|
},
|
|
201
220
|
"transitionDuration": {
|
|
202
221
|
"instant": "50ms",
|
package/dist/tokens.css
CHANGED
|
@@ -49,6 +49,13 @@
|
|
|
49
49
|
--pui-illustration-arrow-width: 3;
|
|
50
50
|
--pui-illustration-arrow-head-length: 5;
|
|
51
51
|
--pui-illustration-arrow-head-angle: 40;
|
|
52
|
+
--pui-illustration-chrome-bar: #2c2c2c;
|
|
53
|
+
--pui-illustration-chrome-line: #1a1a1a;
|
|
54
|
+
--pui-illustration-chrome-well: #3d3d3d;
|
|
55
|
+
--pui-illustration-chrome-text: #888888;
|
|
56
|
+
--pui-illustration-chrome-light-red: #ff5f57;
|
|
57
|
+
--pui-illustration-chrome-light-amber: #febc2e;
|
|
58
|
+
--pui-illustration-chrome-light-green: #28c840;
|
|
52
59
|
--pui-color-neutral-0: #ffffff;
|
|
53
60
|
--pui-color-neutral-100: #f2f2f2;
|
|
54
61
|
--pui-color-neutral-200: #dad9d9;
|
|
@@ -90,15 +97,30 @@
|
|
|
90
97
|
--pui-color-gradient-stop-pink: #f24288;
|
|
91
98
|
--pui-color-gradient-stop-orchid: #ebb8fc;
|
|
92
99
|
--pui-color-gradient-stop-magenta: #d947d6;
|
|
100
|
+
--pui-color-gradient-stop-indigo: #4a3df0;
|
|
101
|
+
--pui-color-gradient-stop-violet: #6e3df0;
|
|
102
|
+
--pui-color-gradient-stop-purple: #b03fe0;
|
|
93
103
|
--pui-color-alpha-neutral-800-50: #231b1b80;
|
|
94
104
|
--pui-color-alpha-white-8: #ffffff14;
|
|
95
105
|
--pui-color-alpha-white-16: #ffffff29;
|
|
96
106
|
--pui-color-alpha-black-7: #00000012;
|
|
97
107
|
--pui-color-alpha-grey-232-49: #e8e8e87d;
|
|
98
108
|
--pui-color-alpha-white-71: #ffffffb5;
|
|
109
|
+
--pui-color-alpha-black-64: #000000a3;
|
|
110
|
+
--pui-color-alpha-black-84: #000000d6;
|
|
111
|
+
--pui-color-alpha-white-10: #ffffff1a;
|
|
112
|
+
--pui-color-alpha-black-14: #00000024;
|
|
113
|
+
--pui-color-chrome-bar: #2c2c2c;
|
|
114
|
+
--pui-color-chrome-line: #1a1a1a;
|
|
115
|
+
--pui-color-chrome-well: #3d3d3d;
|
|
116
|
+
--pui-color-chrome-text: #888888;
|
|
117
|
+
--pui-color-chrome-light-red: #ff5f57;
|
|
118
|
+
--pui-color-chrome-light-amber: #febc2e;
|
|
119
|
+
--pui-color-chrome-light-green: #28c840;
|
|
99
120
|
--pui-gradient-blue: linear-gradient(112deg, #2B25D9 30.59%, #F24288 125.66%);
|
|
100
121
|
--pui-gradient-yellow: linear-gradient(311deg, #EBB8FC 19.79%, #F9C426 80.81%);
|
|
101
122
|
--pui-gradient-red: linear-gradient(101deg, #E42521 26.31%, #D947D6 99.31%);
|
|
123
|
+
--pui-gradient-violet: linear-gradient(135deg, #4A3DF0 0%, #6E3DF0 50%, #B03FE0 100%);
|
|
102
124
|
--pui-space-2: 2px;
|
|
103
125
|
--pui-space-4: 4px;
|
|
104
126
|
--pui-space-8: 8px;
|
|
@@ -160,6 +182,8 @@
|
|
|
160
182
|
--pui-shadow-lg: 0px 24px 48px -12px #0000002e;
|
|
161
183
|
--pui-shadow-xl: 0px 24px 64px 0px #1510511f;
|
|
162
184
|
--pui-shadow-xxl: 0px 32px 64px 0px #00000024;
|
|
185
|
+
/* deprecated: no wearer since the Navigation menu took elevation.modal at Fedor's word (request 1, 2026-09-25, D161); elevation.bar now reads shadow.xxl. Removed in the next major. */
|
|
186
|
+
--pui-shadow-xxl-soft: 0px 32px 64px -12px #00000024;
|
|
163
187
|
--pui-duration-instant: 50ms;
|
|
164
188
|
--pui-duration-fast: 150ms;
|
|
165
189
|
--pui-duration-medium: 200ms;
|
|
@@ -186,6 +210,7 @@
|
|
|
186
210
|
--pui-blur-panel: 14.6px;
|
|
187
211
|
--pui-blur-card: 6.8px;
|
|
188
212
|
--pui-blur-blob: 150px;
|
|
213
|
+
--pui-blur-control: 8px;
|
|
189
214
|
--pui-text-default: #0b0202;
|
|
190
215
|
--pui-text-muted: #544d4d;
|
|
191
216
|
--pui-text-subtle: #858080;
|
|
@@ -202,6 +227,8 @@
|
|
|
202
227
|
--pui-surface-slot: #ffffff;
|
|
203
228
|
--pui-surface-glass: #e8e8e87d;
|
|
204
229
|
--pui-surface-glass-strong: #ffffffb5;
|
|
230
|
+
--pui-surface-glass-dark: #000000a3;
|
|
231
|
+
--pui-surface-glass-dark-strong: #000000d6;
|
|
205
232
|
--pui-ground-page-sunken: #f2f2f2;
|
|
206
233
|
--pui-ground-page-track: #f2f2f2;
|
|
207
234
|
--pui-ground-card-sunken: #dad9d9;
|
|
@@ -249,6 +276,8 @@
|
|
|
249
276
|
--pui-elevation-card: 0px 24px 48px -12px #0000002e;
|
|
250
277
|
--pui-elevation-floating: 0px 24px 64px 0px #1510511f;
|
|
251
278
|
--pui-elevation-modal: 0px 32px 64px 0px #00000024;
|
|
279
|
+
/* deprecated: use elevation.modal - the Navigation menu wears it (request 1, Fedor 2026-09-25, D161). Kept one minor as an alias; removed in the next major. */
|
|
280
|
+
--pui-elevation-bar: 0px 32px 64px 0px #00000024;
|
|
252
281
|
--pui-motion-state: 150ms;
|
|
253
282
|
--pui-motion-move: 200ms;
|
|
254
283
|
--pui-motion-menu: 250ms;
|
|
@@ -266,6 +295,12 @@
|
|
|
266
295
|
--pui-chart-grid: #00000012;
|
|
267
296
|
--pui-chart-rest: #dad9d9;
|
|
268
297
|
--pui-chart-on-fill: #ffffff;
|
|
298
|
+
--pui-sequence-1: #e42521;
|
|
299
|
+
--pui-sequence-2: #f9c426;
|
|
300
|
+
--pui-sequence-3: #2b25d9;
|
|
301
|
+
--pui-sequence-4: #6a66e4;
|
|
302
|
+
--pui-sequence-5: #858080;
|
|
303
|
+
--pui-sequence-6: #ec6663;
|
|
269
304
|
|
|
270
305
|
/* Typography: web-desktop is the default canvas. */
|
|
271
306
|
--pui-type-display-large-font-family: Poppins, sans-serif;
|
|
@@ -517,6 +552,61 @@
|
|
|
517
552
|
--pui-type-label-medium-letter-spacing: 0px;
|
|
518
553
|
}
|
|
519
554
|
|
|
555
|
+
@media (min-width: 768px) and (max-width: 1023px) {
|
|
556
|
+
:root {
|
|
557
|
+
--pui-type-headline-large-font-family: Poppins, sans-serif;
|
|
558
|
+
--pui-type-headline-large-font-size: 65px;
|
|
559
|
+
--pui-type-headline-large-font-weight: 600;
|
|
560
|
+
--pui-type-headline-large-line-height: 1.2;
|
|
561
|
+
--pui-type-headline-large-letter-spacing: 0px;
|
|
562
|
+
--pui-type-headline-medium-font-family: Poppins, sans-serif;
|
|
563
|
+
--pui-type-headline-medium-font-size: 45px;
|
|
564
|
+
--pui-type-headline-medium-font-weight: 600;
|
|
565
|
+
--pui-type-headline-medium-line-height: 1.2;
|
|
566
|
+
--pui-type-headline-medium-letter-spacing: 0px;
|
|
567
|
+
--pui-type-headline-small-font-family: Poppins, sans-serif;
|
|
568
|
+
--pui-type-headline-small-font-size: 40px;
|
|
569
|
+
--pui-type-headline-small-font-weight: 400;
|
|
570
|
+
--pui-type-headline-small-line-height: 1.2;
|
|
571
|
+
--pui-type-headline-small-letter-spacing: 0px;
|
|
572
|
+
--pui-type-title-large-font-family: Poppins, sans-serif;
|
|
573
|
+
--pui-type-title-large-font-size: 32px;
|
|
574
|
+
--pui-type-title-large-font-weight: 600;
|
|
575
|
+
--pui-type-title-large-line-height: 1.2;
|
|
576
|
+
--pui-type-title-large-letter-spacing: 0px;
|
|
577
|
+
--pui-type-title-medium-font-family: Poppins, sans-serif;
|
|
578
|
+
--pui-type-title-medium-font-size: 28px;
|
|
579
|
+
--pui-type-title-medium-font-weight: 600;
|
|
580
|
+
--pui-type-title-medium-line-height: 1.2;
|
|
581
|
+
--pui-type-title-medium-letter-spacing: 0px;
|
|
582
|
+
--pui-type-title-small-font-family: Poppins, sans-serif;
|
|
583
|
+
--pui-type-title-small-font-size: 25px;
|
|
584
|
+
--pui-type-title-small-font-weight: 500;
|
|
585
|
+
--pui-type-title-small-line-height: 1.4;
|
|
586
|
+
--pui-type-title-small-letter-spacing: 0px;
|
|
587
|
+
--pui-type-body-large-font-family: Poppins, sans-serif;
|
|
588
|
+
--pui-type-body-large-font-size: 18px;
|
|
589
|
+
--pui-type-body-large-font-weight: 400;
|
|
590
|
+
--pui-type-body-large-line-height: 1.4;
|
|
591
|
+
--pui-type-body-large-letter-spacing: 0px;
|
|
592
|
+
--pui-type-body-medium-font-family: Poppins, sans-serif;
|
|
593
|
+
--pui-type-body-medium-font-size: 16px;
|
|
594
|
+
--pui-type-body-medium-font-weight: 400;
|
|
595
|
+
--pui-type-body-medium-line-height: 1.4;
|
|
596
|
+
--pui-type-body-medium-letter-spacing: 0px;
|
|
597
|
+
--pui-type-body-small-font-family: Poppins, sans-serif;
|
|
598
|
+
--pui-type-body-small-font-size: 14px;
|
|
599
|
+
--pui-type-body-small-font-weight: 400;
|
|
600
|
+
--pui-type-body-small-line-height: 1.5;
|
|
601
|
+
--pui-type-body-small-letter-spacing: 0px;
|
|
602
|
+
--pui-type-body-x-small-font-family: Poppins, sans-serif;
|
|
603
|
+
--pui-type-body-x-small-font-size: 12px;
|
|
604
|
+
--pui-type-body-x-small-font-weight: 400;
|
|
605
|
+
--pui-type-body-x-small-line-height: 1.7;
|
|
606
|
+
--pui-type-body-x-small-letter-spacing: 0px;
|
|
607
|
+
}
|
|
608
|
+
}
|
|
609
|
+
|
|
520
610
|
@media (max-width: 767px) {
|
|
521
611
|
:root {
|
|
522
612
|
--pui-type-headline-large-font-family: Poppins, sans-serif;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pepperui/tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
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
5
|
"license": "UNLICENSED",
|
|
6
6
|
"private": false,
|