@sage/design-tokens 2.26.0 → 2.27.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.
@@ -1,514 +0,0 @@
1
- <!doctype html>
2
- <html class="no-js" lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
6
- <meta http-equiv="Pragma" content="no-cache" />
7
- <meta http-equiv="Expires" content="0" />
8
-
9
- <title>Sage Design Tokens / base / boxShadow</title>
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
11
- <link rel="preconnect" href="https://fonts.googleapis.com">
12
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
- <link href="https://fonts.googleapis.com/css?family=Lato:400,500,600" rel="stylesheet">
14
- <meta name="description" content="">
15
- <style>
16
- *, *::before, *::after {
17
- box-sizing: border-box;
18
- }
19
-
20
- html {
21
- font-size: 62.5%;
22
- }
23
-
24
- body {
25
- font-size: 1.4rem;
26
- font-family: 'Lato', Arial, sans-serif;
27
- padding: 20px 40px;
28
- }
29
-
30
- table {
31
- width: 100%;
32
- }
33
-
34
- .menu {
35
- position: sticky;
36
- display: inline-block;
37
- vertical-align: top;
38
- max-height: 100vh;
39
- overflow-y: auto;
40
- top: 0;
41
- bottom: 0;
42
- font-size: 14px;
43
- }
44
-
45
- .with-icons:hover .permalink {
46
- visibility: visible;
47
- }
48
-
49
- .permalink {
50
- visibility: hidden;
51
- font-size: 80%;
52
- line-height: inherit;
53
- text-decoration: none;
54
- vertical-align: middle;
55
- }
56
-
57
- .table__color-preview,
58
- .table__spacing-preview,
59
- .table__border-width-preview,
60
- .table__font-size-preview,
61
- .table__sizing-preview,
62
- .table__opacity-preview,
63
- .table__typography-preview,
64
- .table__font-weight-preview,
65
- .table__box-shadow-preview,
66
- .table__font-family-preview,
67
- .table__border-radius-preview {
68
- height: 40px;
69
- width: 100%;
70
- }
71
-
72
- .table__font-size-preview,
73
- .table__typography-preview,
74
- .table__font-weight-preview,
75
- .table__font-family-preview {
76
- vertical-align: middle;
77
- display: table-cell;
78
- }
79
-
80
- .table__box-shadow-preview {
81
- height: 50px;
82
- }
83
-
84
- .table__spacing-preview {
85
- background-color: #626566;
86
- height: 10px;
87
- }
88
-
89
- .table__border-width-preview {
90
- border-style: solid;
91
- border-color: #CCD6DB;
92
- background-color: #626566;
93
- }
94
-
95
- .table__sizing-preview {
96
- background-color: #626566;
97
- }
98
-
99
- .table__opacity-preview {
100
- background-color: #ccc;
101
- }
102
-
103
- .table__opacity-preview div {
104
- width: 100%;
105
- height: 100%;
106
- background-color: #fff;
107
- }
108
-
109
- .table__border-radius-preview {
110
- width: 40px;
111
- border-color: #626566;
112
- border-width: 3px 3px 0 0;
113
- border-style: solid;
114
- }
115
-
116
- #main-container {
117
- max-width: 1024px;
118
- margin: 0 auto;
119
- }
120
-
121
- .embedded #main-container {
122
- max-width: 100%;
123
- }
124
-
125
- #icons-container {
126
- display: grid;
127
- grid-template-columns: repeat(6, 1fr);
128
- grid-gap: 20px;
129
- }
130
-
131
- .divider {
132
- margin: 20px 0 30px;
133
- }
134
-
135
- .grid-item {
136
- display: block;
137
- text-align: center;
138
- position: relative;
139
- padding-bottom: 40px;
140
- padding-top: 20px;
141
- border: 1px solid #dbdbdb;
142
- }
143
-
144
- .grid-item .codes {
145
- position: absolute;
146
- display: flex;
147
- justify-content: space-between;
148
- padding: 5px 20px;
149
- bottom: 0;
150
- left: 0;
151
- right: 0;
152
- border-top: 1px solid rgba(10, 10, 10, .1);
153
- }
154
-
155
- .grid-item .codes div {
156
- cursor: default;
157
- color: rgba(10, 10, 10, .6);
158
- }
159
-
160
- .preview {
161
- display: block;
162
- width: 32px;
163
- height: auto;
164
- }
165
-
166
- .layout {
167
- display: flex;
168
- }
169
-
170
- .layout .navigation {
171
- flex: 0 0 200px;
172
- }
173
-
174
- .layout .content {
175
- flex: 1 1 auto;
176
- }
177
-
178
- .embedded {
179
- padding: 10px;
180
- }
181
-
182
- .embedded .hide-on-embedded {
183
- display: none;
184
- }
185
- </style>
186
- </head>
187
- <body>
188
- <div id="main-container">
189
- <div class="layout">
190
- <aside class="hide-on-embedded navigation menu py-0">
191
- <section class="my-6">
192
- <p class="menu-label">
193
- <a href="../../base/index.html">
194
- base
195
- </a>
196
- </p>
197
- <ul class="menu-list">
198
- <li>
199
- <a href="../../base/colors/index.html">
200
- colors
201
- </a>
202
- </li>
203
- <li>
204
- <a href="../../base/sizing/index.html">
205
- sizing
206
- </a>
207
- </li>
208
- <li>
209
- <a href="../../base/spacing/index.html">
210
- spacing
211
- </a>
212
- </li>
213
- <li>
214
- <a href="../../base/border-width/index.html">
215
- borderWidth
216
- </a>
217
- </li>
218
- <li>
219
- <a href="../../base/font-sizes/index.html">
220
- fontSizes
221
- </a>
222
- </li>
223
- <li>
224
- <a href="../../base/box-shadow/index.html">
225
- boxShadow
226
- </a>
227
- </li>
228
- <li>
229
- <a href="../../base/font-weights/index.html">
230
- fontWeights
231
- </a>
232
- </li>
233
- <li>
234
- <a href="../../base/line-heights/index.html">
235
- lineHeights
236
- </a>
237
- </li>
238
- <li>
239
- <a href="../../base/font-families/index.html">
240
- fontFamilies
241
- </a>
242
- </li>
243
- <li>
244
- <a href="../../base/border-radius/index.html">
245
- borderRadius
246
- </a>
247
- </li>
248
- <li>
249
- <a href="../../base/typography/index.html">
250
- typography
251
- </a>
252
- </li>
253
- <li>
254
- <a href="../../base/opacity/index.html">
255
- opacity
256
- </a>
257
- </li>
258
- </ul>
259
- </section>
260
- </aside>
261
- <main class="content">
262
- <h1 class="hide-on-embedded">
263
- <a href="../../index.html">
264
- Sage Design Tokens
265
- </a>
266
- /
267
- <a href="../index.html">
268
- base
269
- </a>
270
- /
271
- boxShadow
272
- </h1>
273
-
274
- <section class="my-6">
275
- <table class="table is-bordered is-hoverable is-fullwidth">
276
- <colgroup>
277
- <col width="50%">
278
- <col width="25%">
279
- <col width="35%">
280
- </colgroup>
281
- <thead>
282
- <tr>
283
- <th class="has-background-light">Name</th>
284
- <th class="has-background-light">Value</th>
285
- <th class="has-background-light">Preview</th>
286
- </tr>
287
- </thead>
288
- <tr>
289
- <td class="with-icons is-vcentered"
290
- id="base-boxShadow100"
291
- title="theme: base; category: boxShadow; variant: 100; ">
292
- boxShadow100
293
- <a href="#base-boxShadow100"
294
- title="permalink"
295
- class="permalink">
296
- 🔗
297
- </a>
298
- </td>
299
- <td class="is-vcentered">
300
- <pre>0 5px 5px 0 #00141e33, 0 10px 10px 0 #00141e1a</pre>
301
- </td>
302
- <td class="is-vcentered">
303
- <div class="table__box-shadow-preview"
304
- style="box-shadow: 0 5px 5px 0 #00141e33, 0 10px 10px 0 #00141e1a">
305
- </div>
306
-
307
- </td>
308
- </tr>
309
- <tr>
310
- <td class="with-icons is-vcentered"
311
- id="base-boxShadow150"
312
- title="theme: base; category: boxShadow; variant: 150; ">
313
- boxShadow150
314
- <a href="#base-boxShadow150"
315
- title="permalink"
316
- class="permalink">
317
- 🔗
318
- </a>
319
- </td>
320
- <td class="is-vcentered">
321
- <pre>0 -4px 12px 0 #00141e0d</pre>
322
- </td>
323
- <td class="is-vcentered">
324
- <div class="table__box-shadow-preview"
325
- style="box-shadow: 0 -4px 12px 0 #00141e0d">
326
- </div>
327
-
328
- </td>
329
- </tr>
330
- <tr>
331
- <td class="with-icons is-vcentered"
332
- id="base-boxShadow200"
333
- title="theme: base; category: boxShadow; variant: 200; ">
334
- boxShadow200
335
- <a href="#base-boxShadow200"
336
- title="permalink"
337
- class="permalink">
338
- 🔗
339
- </a>
340
- </td>
341
- <td class="is-vcentered">
342
- <pre>0 10px 20px 0 #00141e33, 0 20px 40px 0 #00141e1a</pre>
343
- </td>
344
- <td class="is-vcentered">
345
- <div class="table__box-shadow-preview"
346
- style="box-shadow: 0 10px 20px 0 #00141e33, 0 20px 40px 0 #00141e1a">
347
- </div>
348
-
349
- </td>
350
- </tr>
351
- <tr>
352
- <td class="with-icons is-vcentered"
353
- id="base-boxShadow300"
354
- title="theme: base; category: boxShadow; variant: 300; ">
355
- boxShadow300
356
- <a href="#base-boxShadow300"
357
- title="permalink"
358
- class="permalink">
359
- 🔗
360
- </a>
361
- </td>
362
- <td class="is-vcentered">
363
- <pre>0 10px 30px 0 #00141e1a, 0 30px 60px 0 #00141e1a</pre>
364
- </td>
365
- <td class="is-vcentered">
366
- <div class="table__box-shadow-preview"
367
- style="box-shadow: 0 10px 30px 0 #00141e1a, 0 30px 60px 0 #00141e1a">
368
- </div>
369
-
370
- </td>
371
- </tr>
372
- <tr>
373
- <td class="with-icons is-vcentered"
374
- id="base-boxShadow400"
375
- title="theme: base; category: boxShadow; variant: 400; ">
376
- boxShadow400
377
- <a href="#base-boxShadow400"
378
- title="permalink"
379
- class="permalink">
380
- 🔗
381
- </a>
382
- </td>
383
- <td class="is-vcentered">
384
- <pre>0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a</pre>
385
- </td>
386
- <td class="is-vcentered">
387
- <div class="table__box-shadow-preview"
388
- style="box-shadow: 0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a">
389
- </div>
390
-
391
- </td>
392
- </tr>
393
- <tr>
394
- <td class="with-icons is-vcentered"
395
- id="base-boxShadow010"
396
- title="theme: base; category: boxShadow; variant: 010; ">
397
- boxShadow010
398
- <a href="#base-boxShadow010"
399
- title="permalink"
400
- class="permalink">
401
- 🔗
402
- </a>
403
- </td>
404
- <td class="is-vcentered">
405
- <pre>inset 0 -1px 0 0 #e6ebedff</pre>
406
- </td>
407
- <td class="is-vcentered">
408
- <div class="table__box-shadow-preview"
409
- style="box-shadow: inset 0 -1px 0 0 #e6ebedff">
410
- </div>
411
-
412
- </td>
413
- </tr>
414
- <tr>
415
- <td class="with-icons is-vcentered"
416
- id="base-boxShadow050"
417
- title="theme: base; category: boxShadow; variant: 050; ">
418
- boxShadow050
419
- <a href="#base-boxShadow050"
420
- title="permalink"
421
- class="permalink">
422
- 🔗
423
- </a>
424
- </td>
425
- <td class="is-vcentered">
426
- <pre>0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26</pre>
427
- </td>
428
- <td class="is-vcentered">
429
- <div class="table__box-shadow-preview"
430
- style="box-shadow: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26">
431
- </div>
432
-
433
- </td>
434
- </tr>
435
- <tr>
436
- <td class="with-icons is-vcentered"
437
- id="base-boxShadow075"
438
- title="theme: base; category: boxShadow; variant: 075; ">
439
- boxShadow075
440
- <a href="#base-boxShadow075"
441
- title="permalink"
442
- class="permalink">
443
- 🔗
444
- </a>
445
- </td>
446
- <td class="is-vcentered">
447
- <pre>inset 0 6px 4px -4px #00141e0d</pre>
448
- </td>
449
- <td class="is-vcentered">
450
- <div class="table__box-shadow-preview"
451
- style="box-shadow: inset 0 6px 4px -4px #00141e0d">
452
- </div>
453
-
454
- </td>
455
- </tr>
456
- <tr>
457
- <td class="with-icons is-vcentered"
458
- id="base-boxShadow090"
459
- title="theme: base; category: boxShadow; variant: 090; ">
460
- boxShadow090
461
- <a href="#base-boxShadow090"
462
- title="permalink"
463
- class="permalink">
464
- 🔗
465
- </a>
466
- </td>
467
- <td class="is-vcentered">
468
- <pre>0 4px 8px -4px #00141e1a</pre>
469
- </td>
470
- <td class="is-vcentered">
471
- <div class="table__box-shadow-preview"
472
- style="box-shadow: 0 4px 8px -4px #00141e1a">
473
- </div>
474
-
475
- </td>
476
- </tr>
477
- <tr>
478
- <td class="with-icons is-vcentered"
479
- id="base-boxShadow091"
480
- title="theme: base; category: boxShadow; variant: 091; ">
481
- boxShadow091
482
- <a href="#base-boxShadow091"
483
- title="permalink"
484
- class="permalink">
485
- 🔗
486
- </a>
487
- </td>
488
- <td class="is-vcentered">
489
- <pre>4px 0 8px -4px #00141e1a</pre>
490
- </td>
491
- <td class="is-vcentered">
492
- <div class="table__box-shadow-preview"
493
- style="box-shadow: 4px 0 8px -4px #00141e1a">
494
- </div>
495
-
496
- </td>
497
- </tr>
498
- </table>
499
- </section>
500
- </main>
501
- </div>
502
-
503
-
504
- </div>
505
-
506
- <script>
507
- const searchParams = new URLSearchParams(window.location.search);
508
- const embedded = !!searchParams.get('embedded');
509
- if(embedded) {
510
- document.body.classList.add('embedded')
511
- }
512
- </script>
513
- </body>
514
- </html>