@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/_tokens.scss
CHANGED
|
@@ -45,6 +45,13 @@ $pui-illustration-arrow-color: #6c6666;
|
|
|
45
45
|
$pui-illustration-arrow-width: 3;
|
|
46
46
|
$pui-illustration-arrow-head-length: 5;
|
|
47
47
|
$pui-illustration-arrow-head-angle: 40;
|
|
48
|
+
$pui-illustration-chrome-bar: #2c2c2c;
|
|
49
|
+
$pui-illustration-chrome-line: #1a1a1a;
|
|
50
|
+
$pui-illustration-chrome-well: #3d3d3d;
|
|
51
|
+
$pui-illustration-chrome-text: #888888;
|
|
52
|
+
$pui-illustration-chrome-light-red: #ff5f57;
|
|
53
|
+
$pui-illustration-chrome-light-amber: #febc2e;
|
|
54
|
+
$pui-illustration-chrome-light-green: #28c840;
|
|
48
55
|
$pui-color-neutral-0: #ffffff;
|
|
49
56
|
$pui-color-neutral-100: #f2f2f2;
|
|
50
57
|
$pui-color-neutral-200: #dad9d9;
|
|
@@ -86,15 +93,30 @@ $pui-color-light-blue-100: #f2f2f7;
|
|
|
86
93
|
$pui-color-gradient-stop-pink: #f24288;
|
|
87
94
|
$pui-color-gradient-stop-orchid: #ebb8fc;
|
|
88
95
|
$pui-color-gradient-stop-magenta: #d947d6;
|
|
96
|
+
$pui-color-gradient-stop-indigo: #4a3df0;
|
|
97
|
+
$pui-color-gradient-stop-violet: #6e3df0;
|
|
98
|
+
$pui-color-gradient-stop-purple: #b03fe0;
|
|
89
99
|
$pui-color-alpha-neutral-800-50: #231b1b80;
|
|
90
100
|
$pui-color-alpha-white-8: #ffffff14;
|
|
91
101
|
$pui-color-alpha-white-16: #ffffff29;
|
|
92
102
|
$pui-color-alpha-black-7: #00000012;
|
|
93
103
|
$pui-color-alpha-grey-232-49: #e8e8e87d;
|
|
94
104
|
$pui-color-alpha-white-71: #ffffffb5;
|
|
105
|
+
$pui-color-alpha-black-64: #000000a3;
|
|
106
|
+
$pui-color-alpha-black-84: #000000d6;
|
|
107
|
+
$pui-color-alpha-white-10: #ffffff1a;
|
|
108
|
+
$pui-color-alpha-black-14: #00000024;
|
|
109
|
+
$pui-color-chrome-bar: #2c2c2c;
|
|
110
|
+
$pui-color-chrome-line: #1a1a1a;
|
|
111
|
+
$pui-color-chrome-well: #3d3d3d;
|
|
112
|
+
$pui-color-chrome-text: #888888;
|
|
113
|
+
$pui-color-chrome-light-red: #ff5f57;
|
|
114
|
+
$pui-color-chrome-light-amber: #febc2e;
|
|
115
|
+
$pui-color-chrome-light-green: #28c840;
|
|
95
116
|
$pui-gradient-blue: linear-gradient(112deg, #2B25D9 30.59%, #F24288 125.66%);
|
|
96
117
|
$pui-gradient-yellow: linear-gradient(311deg, #EBB8FC 19.79%, #F9C426 80.81%);
|
|
97
118
|
$pui-gradient-red: linear-gradient(101deg, #E42521 26.31%, #D947D6 99.31%);
|
|
119
|
+
$pui-gradient-violet: linear-gradient(135deg, #4A3DF0 0%, #6E3DF0 50%, #B03FE0 100%);
|
|
98
120
|
$pui-space-2: 2px;
|
|
99
121
|
$pui-space-4: 4px;
|
|
100
122
|
$pui-space-8: 8px;
|
|
@@ -156,6 +178,7 @@ $pui-shadow-sm: 0px 1px 2px 0px #0000000d;
|
|
|
156
178
|
$pui-shadow-lg: 0px 24px 48px -12px #0000002e;
|
|
157
179
|
$pui-shadow-xl: 0px 24px 64px 0px #1510511f;
|
|
158
180
|
$pui-shadow-xxl: 0px 32px 64px 0px #00000024;
|
|
181
|
+
$pui-shadow-xxl-soft: 0px 32px 64px -12px #00000024;
|
|
159
182
|
$pui-duration-instant: 50ms;
|
|
160
183
|
$pui-duration-fast: 150ms;
|
|
161
184
|
$pui-duration-medium: 200ms;
|
|
@@ -182,6 +205,7 @@ $pui-blur-nav: 7.3px;
|
|
|
182
205
|
$pui-blur-panel: 14.6px;
|
|
183
206
|
$pui-blur-card: 6.8px;
|
|
184
207
|
$pui-blur-blob: 150px;
|
|
208
|
+
$pui-blur-control: 8px;
|
|
185
209
|
$pui-text-default: #0b0202;
|
|
186
210
|
$pui-text-muted: #544d4d;
|
|
187
211
|
$pui-text-subtle: #858080;
|
|
@@ -198,6 +222,8 @@ $pui-surface-inverse: #231b1b;
|
|
|
198
222
|
$pui-surface-slot: #ffffff;
|
|
199
223
|
$pui-surface-glass: #e8e8e87d;
|
|
200
224
|
$pui-surface-glass-strong: #ffffffb5;
|
|
225
|
+
$pui-surface-glass-dark: #000000a3;
|
|
226
|
+
$pui-surface-glass-dark-strong: #000000d6;
|
|
201
227
|
$pui-ground-page-sunken: #f2f2f2;
|
|
202
228
|
$pui-ground-page-track: #f2f2f2;
|
|
203
229
|
$pui-ground-card-sunken: #dad9d9;
|
|
@@ -245,6 +271,7 @@ $pui-elevation-flat: 0px 1px 2px 0px #0000000d;
|
|
|
245
271
|
$pui-elevation-card: 0px 24px 48px -12px #0000002e;
|
|
246
272
|
$pui-elevation-floating: 0px 24px 64px 0px #1510511f;
|
|
247
273
|
$pui-elevation-modal: 0px 32px 64px 0px #00000024;
|
|
274
|
+
$pui-elevation-bar: 0px 32px 64px 0px #00000024;
|
|
248
275
|
$pui-motion-state: 150ms;
|
|
249
276
|
$pui-motion-move: 200ms;
|
|
250
277
|
$pui-motion-menu: 250ms;
|
|
@@ -262,6 +289,12 @@ $pui-chart-text: #0b0202;
|
|
|
262
289
|
$pui-chart-grid: #00000012;
|
|
263
290
|
$pui-chart-rest: #dad9d9;
|
|
264
291
|
$pui-chart-on-fill: #ffffff;
|
|
292
|
+
$pui-sequence-1: #e42521;
|
|
293
|
+
$pui-sequence-2: #f9c426;
|
|
294
|
+
$pui-sequence-3: #2b25d9;
|
|
295
|
+
$pui-sequence-4: #6a66e4;
|
|
296
|
+
$pui-sequence-5: #858080;
|
|
297
|
+
$pui-sequence-6: #ec6663;
|
|
265
298
|
|
|
266
299
|
// Accent modes as a map: map-get($pui-accent, blue, main)
|
|
267
300
|
$pui-accent: (
|