@sage/design-tokens 1.94.0 → 2.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 (48) hide show
  1. package/README.md +0 -1
  2. package/android/no-theme.xml +1 -1
  3. package/css/no-theme.css +1 -1
  4. package/data/tokens.json +0 -2824
  5. package/docs/tokens/index.html +68 -8245
  6. package/docs/tokens/no-theme/border-radius/index.html +0 -79
  7. package/docs/tokens/no-theme/border-width/index.html +0 -79
  8. package/docs/tokens/no-theme/box-shadow/index.html +0 -79
  9. package/docs/tokens/no-theme/colors/index.html +0 -79
  10. package/docs/tokens/no-theme/font-families/index.html +0 -79
  11. package/docs/tokens/no-theme/font-sizes/index.html +0 -79
  12. package/docs/tokens/no-theme/font-weights/index.html +0 -79
  13. package/docs/tokens/no-theme/index.html +0 -79
  14. package/docs/tokens/no-theme/line-heights/index.html +0 -79
  15. package/docs/tokens/no-theme/sizing/index.html +0 -79
  16. package/docs/tokens/no-theme/spacing/index.html +0 -79
  17. package/docs/tokens/no-theme/typography/index.html +0 -79
  18. package/index.d.ts +0 -2
  19. package/index.js +0 -2
  20. package/ios/no-theme.h +1 -1
  21. package/js/no-theme/common.js +1 -1
  22. package/package.json +1 -1
  23. package/sage-design-tokens-2.2.0.tgz +0 -0
  24. package/scss/no-theme.scss +1 -1
  25. package/android/base.xml +0 -381
  26. package/css/base.css +0 -383
  27. package/docs/tokens/base/border-radius/index.html +0 -399
  28. package/docs/tokens/base/border-width/index.html +0 -483
  29. package/docs/tokens/base/box-shadow/index.html +0 -525
  30. package/docs/tokens/base/colors/index.html +0 -4053
  31. package/docs/tokens/base/font-families/index.html +0 -462
  32. package/docs/tokens/base/font-sizes/index.html +0 -664
  33. package/docs/tokens/base/font-weights/index.html +0 -441
  34. package/docs/tokens/base/index.html +0 -8343
  35. package/docs/tokens/base/line-heights/index.html +0 -441
  36. package/docs/tokens/base/opacity/index.html +0 -441
  37. package/docs/tokens/base/sizing/index.html +0 -903
  38. package/docs/tokens/base/spacing/index.html +0 -735
  39. package/docs/tokens/base/typography/index.html +0 -2772
  40. package/docs/tokens/figma-only/index.html +0 -394
  41. package/docs/tokens/figma-only/sizing/index.html +0 -399
  42. package/ios/base.h +0 -385
  43. package/js/base/common.d.ts +0 -372
  44. package/js/base/common.js +0 -383
  45. package/js/base/es6.d.ts +0 -375
  46. package/js/base/es6.js +0 -378
  47. package/sage-design-tokens-1.94.0.tgz +0 -0
  48. package/scss/base.scss +0 -380
package/docs/tokens/base/border-radius/index.html DELETED
@@ -1,399 +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 / borderRadius</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
- <p class="menu-label">
260
- <a href="../../no-theme/index.html">
261
- no-theme
262
- </a>
263
- </p>
264
- <ul class="menu-list">
265
- <li>
266
- <a href="../../no-theme/colors/index.html">
267
- colors
268
- </a>
269
- </li>
270
- <li>
271
- <a href="../../no-theme/sizing/index.html">
272
- sizing
273
- </a>
274
- </li>
275
- <li>
276
- <a href="../../no-theme/spacing/index.html">
277
- spacing
278
- </a>
279
- </li>
280
- <li>
281
- <a href="../../no-theme/border-width/index.html">
282
- borderWidth
283
- </a>
284
- </li>
285
- <li>
286
- <a href="../../no-theme/font-sizes/index.html">
287
- fontSizes
288
- </a>
289
- </li>
290
- <li>
291
- <a href="../../no-theme/box-shadow/index.html">
292
- boxShadow
293
- </a>
294
- </li>
295
- <li>
296
- <a href="../../no-theme/font-weights/index.html">
297
- fontWeights
298
- </a>
299
- </li>
300
- <li>
301
- <a href="../../no-theme/line-heights/index.html">
302
- lineHeights
303
- </a>
304
- </li>
305
- <li>
306
- <a href="../../no-theme/font-families/index.html">
307
- fontFamilies
308
- </a>
309
- </li>
310
- <li>
311
- <a href="../../no-theme/border-radius/index.html">
312
- borderRadius
313
- </a>
314
- </li>
315
- <li>
316
- <a href="../../no-theme/typography/index.html">
317
- typography
318
- </a>
319
- </li>
320
- </ul>
321
- <p class="menu-label">
322
- <a href="../../figma-only/index.html">
323
- figma-only
324
- </a>
325
- </p>
326
- <ul class="menu-list">
327
- <li>
328
- <a href="../../figma-only/sizing/index.html">
329
- sizing
330
- </a>
331
- </li>
332
- </ul>
333
- </section>
334
- </aside>
335
- <main class="content">
336
- <h1 class="hide-on-embedded">
337
- <a href="../../index.html">
338
- Sage Design Tokens
339
- </a>
340
- /
341
- <a href="../index.html">
342
- base
343
- </a>
344
- /
345
- borderRadius
346
- </h1>
347
-
348
- <section class="my-6">
349
- <table class="table is-bordered is-hoverable is-fullwidth">
350
- <colgroup>
351
- <col width="50%">
352
- <col width="25%">
353
- <col width="35%">
354
- </colgroup>
355
- <thead>
356
- <tr>
357
- <th class="has-background-light">Name</th>
358
- <th class="has-background-light">Value</th>
359
- <th class="has-background-light">Preview</th>
360
- </tr>
361
- </thead>
362
- <tr>
363
- <td class="with-icons is-vcentered"
364
- id="base-borderRadiusCircle"
365
- title="theme: base; category: borderRadius; variant: circle; ">
366
- borderRadiusCircle
367
- <a href="#base-borderRadiusCircle"
368
- title="permalink"
369
- class="permalink">
370
- 🔗
371
- </a>
372
- </td>
373
- <td class="is-vcentered">
374
- <pre>50%</pre>
375
- </td>
376
- <td class="is-vcentered">
377
- <div class="table__border-radius-preview"
378
- style="border-top-right-radius: 50%">
379
- </div>
380
-
381
- </td>
382
- </tr>
383
- </table>
384
- </section>
385
- </main>
386
- </div>
387
-
388
-
389
- </div>
390
-
391
- <script>
392
- const searchParams = new URLSearchParams(window.location.search);
393
- const embedded = !!searchParams.get('embedded');
394
- if(embedded) {
395
- document.body.classList.add('embedded')
396
- }
397
- </script>
398
- </body>
399
- </html>