@sage/design-tokens 2.2.0 → 2.3.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 (38) hide show
  1. package/android/base.xml +385 -0
  2. package/assets/fonts/sageui.css +18 -18
  3. package/css/base.css +387 -0
  4. package/data/tokens.json +1450 -257
  5. package/docs/tokens/{no-theme → base}/border-radius/index.html +25 -20
  6. package/docs/tokens/{no-theme → base}/border-width/index.html +35 -30
  7. package/docs/tokens/base/box-shadow/index.html +451 -0
  8. package/docs/tokens/base/colors/index.html +4063 -0
  9. package/docs/tokens/{no-theme → base}/font-families/index.html +33 -28
  10. package/docs/tokens/{no-theme → base}/font-sizes/index.html +65 -60
  11. package/docs/tokens/{no-theme → base}/font-weights/index.html +29 -24
  12. package/docs/tokens/base/index.html +8353 -0
  13. package/docs/tokens/{no-theme → base}/line-heights/index.html +47 -21
  14. package/docs/tokens/{no-theme/box-shadow → base/opacity}/index.html +42 -58
  15. package/docs/tokens/{no-theme → base}/sizing/index.html +167 -78
  16. package/docs/tokens/{no-theme → base}/spacing/index.html +71 -66
  17. package/docs/tokens/base/typography/index.html +2698 -0
  18. package/docs/tokens/index.html +4318 -1771
  19. package/index.d.ts +2 -2
  20. package/index.js +2 -2
  21. package/ios/base.h +389 -0
  22. package/js/{no-theme → base}/common.d.ts +136 -16
  23. package/js/base/common.js +387 -0
  24. package/js/{no-theme → base}/es6.d.ts +136 -16
  25. package/js/base/es6.js +382 -0
  26. package/package.json +1 -1
  27. package/sage-design-tokens-2.3.0.tgz +0 -0
  28. package/scss/base.scss +384 -0
  29. package/android/no-theme.xml +0 -265
  30. package/css/no-theme.css +0 -267
  31. package/docs/tokens/no-theme/colors/index.html +0 -2903
  32. package/docs/tokens/no-theme/index.html +0 -5811
  33. package/docs/tokens/no-theme/typography/index.html +0 -1559
  34. package/ios/no-theme.h +0 -269
  35. package/js/no-theme/common.js +0 -267
  36. package/js/no-theme/es6.js +0 -262
  37. package/sage-design-tokens-2.2.0.tgz +0 -0
  38. package/scss/no-theme.scss +0 -264
package/docs/tokens/{no-theme → base}/line-heights/index.html RENAMED
@@ -6,7 +6,7 @@
6
6
  <meta http-equiv="Pragma" content="no-cache" />
7
7
  <meta http-equiv="Expires" content="0" />
8
8
 
9
- <title>Sage Design Tokens / no-theme / lineHeights</title>
9
+ <title>Sage Design Tokens / base / lineHeights</title>
10
10
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
11
11
  <link rel="preconnect" href="https://fonts.googleapis.com">
12
12
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -190,66 +190,71 @@
190
190
  <aside class="hide-on-embedded navigation menu py-0">
191
191
  <section class="my-6">
192
192
  <p class="menu-label">
193
- <a href="../../no-theme/index.html">
194
- no-theme
193
+ <a href="../../base/index.html">
194
+ base
195
195
  </a>
196
196
  </p>
197
197
  <ul class="menu-list">
198
198
  <li>
199
- <a href="../../no-theme/colors/index.html">
199
+ <a href="../../base/colors/index.html">
200
200
  colors
201
201
  </a>
202
202
  </li>
203
203
  <li>
204
- <a href="../../no-theme/sizing/index.html">
204
+ <a href="../../base/sizing/index.html">
205
205
  sizing
206
206
  </a>
207
207
  </li>
208
208
  <li>
209
- <a href="../../no-theme/spacing/index.html">
209
+ <a href="../../base/spacing/index.html">
210
210
  spacing
211
211
  </a>
212
212
  </li>
213
213
  <li>
214
- <a href="../../no-theme/border-width/index.html">
214
+ <a href="../../base/border-width/index.html">
215
215
  borderWidth
216
216
  </a>
217
217
  </li>
218
218
  <li>
219
- <a href="../../no-theme/font-sizes/index.html">
219
+ <a href="../../base/font-sizes/index.html">
220
220
  fontSizes
221
221
  </a>
222
222
  </li>
223
223
  <li>
224
- <a href="../../no-theme/box-shadow/index.html">
224
+ <a href="../../base/box-shadow/index.html">
225
225
  boxShadow
226
226
  </a>
227
227
  </li>
228
228
  <li>
229
- <a href="../../no-theme/font-weights/index.html">
229
+ <a href="../../base/font-weights/index.html">
230
230
  fontWeights
231
231
  </a>
232
232
  </li>
233
233
  <li>
234
- <a href="../../no-theme/line-heights/index.html">
234
+ <a href="../../base/line-heights/index.html">
235
235
  lineHeights
236
236
  </a>
237
237
  </li>
238
238
  <li>
239
- <a href="../../no-theme/font-families/index.html">
239
+ <a href="../../base/font-families/index.html">
240
240
  fontFamilies
241
241
  </a>
242
242
  </li>
243
243
  <li>
244
- <a href="../../no-theme/border-radius/index.html">
244
+ <a href="../../base/border-radius/index.html">
245
245
  borderRadius
246
246
  </a>
247
247
  </li>
248
248
  <li>
249
- <a href="../../no-theme/typography/index.html">
249
+ <a href="../../base/typography/index.html">
250
250
  typography
251
251
  </a>
252
252
  </li>
253
+ <li>
254
+ <a href="../../base/opacity/index.html">
255
+ opacity
256
+ </a>
257
+ </li>
253
258
  </ul>
254
259
  </section>
255
260
  </aside>
@@ -260,7 +265,7 @@
260
265
  </a>
261
266
  /
262
267
  <a href="../index.html">
263
- no-theme
268
+ base
264
269
  </a>
265
270
  /
266
271
  lineHeights
@@ -282,10 +287,31 @@
282
287
  </thead>
283
288
  <tr>
284
289
  <td class="with-icons is-vcentered"
285
- id="no-theme-lineHeights400"
286
- title="theme: no-theme; category: lineHeights; variant: 400; ">
290
+ id="base-lineHeights300"
291
+ title="theme: base; category: lineHeights; variant: 300; ">
292
+ lineHeights300
293
+ <a href="#base-lineHeights300"
294
+ title="permalink"
295
+ class="permalink">
296
+ 🔗
297
+ </a>
298
+ </td>
299
+ <td class="is-vcentered">
300
+ <pre>100%</pre>
301
+ </td>
302
+ <td class="is-vcentered">
303
+ <div class="table__line-height-preview" style="height: 100%">
304
+ Aa
305
+ </div>
306
+
307
+ </td>
308
+ </tr>
309
+ <tr>
310
+ <td class="with-icons is-vcentered"
311
+ id="base-lineHeights400"
312
+ title="theme: base; category: lineHeights; variant: 400; ">
287
313
  lineHeights400
288
- <a href="#no-theme-lineHeights400"
314
+ <a href="#base-lineHeights400"
289
315
  title="permalink"
290
316
  class="permalink">
291
317
  🔗
@@ -303,10 +329,10 @@
303
329
  </tr>
304
330
  <tr>
305
331
  <td class="with-icons is-vcentered"
306
- id="no-theme-lineHeights500"
307
- title="theme: no-theme; category: lineHeights; variant: 500; ">
332
+ id="base-lineHeights500"
333
+ title="theme: base; category: lineHeights; variant: 500; ">
308
334
  lineHeights500
309
- <a href="#no-theme-lineHeights500"
335
+ <a href="#base-lineHeights500"
310
336
  title="permalink"
311
337
  class="permalink">
312
338
  🔗
package/docs/tokens/{no-theme/box-shadow → base/opacity}/index.html RENAMED
@@ -6,7 +6,7 @@
6
6
  <meta http-equiv="Pragma" content="no-cache" />
7
7
  <meta http-equiv="Expires" content="0" />
8
8
 
9
- <title>Sage Design Tokens / no-theme / boxShadow</title>
9
+ <title>Sage Design Tokens / base / opacity</title>
10
10
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
11
11
  <link rel="preconnect" href="https://fonts.googleapis.com">
12
12
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -190,66 +190,71 @@
190
190
  <aside class="hide-on-embedded navigation menu py-0">
191
191
  <section class="my-6">
192
192
  <p class="menu-label">
193
- <a href="../../no-theme/index.html">
194
- no-theme
193
+ <a href="../../base/index.html">
194
+ base
195
195
  </a>
196
196
  </p>
197
197
  <ul class="menu-list">
198
198
  <li>
199
- <a href="../../no-theme/colors/index.html">
199
+ <a href="../../base/colors/index.html">
200
200
  colors
201
201
  </a>
202
202
  </li>
203
203
  <li>
204
- <a href="../../no-theme/sizing/index.html">
204
+ <a href="../../base/sizing/index.html">
205
205
  sizing
206
206
  </a>
207
207
  </li>
208
208
  <li>
209
- <a href="../../no-theme/spacing/index.html">
209
+ <a href="../../base/spacing/index.html">
210
210
  spacing
211
211
  </a>
212
212
  </li>
213
213
  <li>
214
- <a href="../../no-theme/border-width/index.html">
214
+ <a href="../../base/border-width/index.html">
215
215
  borderWidth
216
216
  </a>
217
217
  </li>
218
218
  <li>
219
- <a href="../../no-theme/font-sizes/index.html">
219
+ <a href="../../base/font-sizes/index.html">
220
220
  fontSizes
221
221
  </a>
222
222
  </li>
223
223
  <li>
224
- <a href="../../no-theme/box-shadow/index.html">
224
+ <a href="../../base/box-shadow/index.html">
225
225
  boxShadow
226
226
  </a>
227
227
  </li>
228
228
  <li>
229
- <a href="../../no-theme/font-weights/index.html">
229
+ <a href="../../base/font-weights/index.html">
230
230
  fontWeights
231
231
  </a>
232
232
  </li>
233
233
  <li>
234
- <a href="../../no-theme/line-heights/index.html">
234
+ <a href="../../base/line-heights/index.html">
235
235
  lineHeights
236
236
  </a>
237
237
  </li>
238
238
  <li>
239
- <a href="../../no-theme/font-families/index.html">
239
+ <a href="../../base/font-families/index.html">
240
240
  fontFamilies
241
241
  </a>
242
242
  </li>
243
243
  <li>
244
- <a href="../../no-theme/border-radius/index.html">
244
+ <a href="../../base/border-radius/index.html">
245
245
  borderRadius
246
246
  </a>
247
247
  </li>
248
248
  <li>
249
- <a href="../../no-theme/typography/index.html">
249
+ <a href="../../base/typography/index.html">
250
250
  typography
251
251
  </a>
252
252
  </li>
253
+ <li>
254
+ <a href="../../base/opacity/index.html">
255
+ opacity
256
+ </a>
257
+ </li>
253
258
  </ul>
254
259
  </section>
255
260
  </aside>
@@ -260,10 +265,10 @@
260
265
  </a>
261
266
  /
262
267
  <a href="../index.html">
263
- no-theme
268
+ base
264
269
  </a>
265
270
  /
266
- boxShadow
271
+ opacity
267
272
  </h1>
268
273
 
269
274
  <section class="my-6">
@@ -282,84 +287,63 @@
282
287
  </thead>
283
288
  <tr>
284
289
  <td class="with-icons is-vcentered"
285
- id="no-theme-boxShadow100"
286
- title="theme: no-theme; category: boxShadow; variant: 100; ">
287
- boxShadow100
288
- <a href="#no-theme-boxShadow100"
289
- title="permalink"
290
- class="permalink">
291
- 🔗
292
- </a>
293
- </td>
294
- <td class="is-vcentered">
295
- <pre>0 10px 10px 0 #fb450080</pre>
296
- </td>
297
- <td class="is-vcentered">
298
- <div class="table__box-shadow-preview"
299
- style="box-shadow: 0 10px 10px 0 #fb450080">
300
- </div>
301
-
302
- </td>
303
- </tr>
304
- <tr>
305
- <td class="with-icons is-vcentered"
306
- id="no-theme-boxShadow200"
307
- title="theme: no-theme; category: boxShadow; variant: 200; ">
308
- boxShadow200
309
- <a href="#no-theme-boxShadow200"
290
+ id="base-opacity300"
291
+ title="theme: base; category: opacity; variant: 300; ">
292
+ opacity300
293
+ <a href="#base-opacity300"
310
294
  title="permalink"
311
295
  class="permalink">
312
296
  🔗
313
297
  </a>
314
298
  </td>
315
299
  <td class="is-vcentered">
316
- <pre>0 20px 40px 0 #95db0080</pre>
300
+ <pre>0.3</pre>
317
301
  </td>
318
302
  <td class="is-vcentered">
319
- <div class="table__box-shadow-preview"
320
- style="box-shadow: 0 20px 40px 0 #95db0080">
303
+ <div class="table__opacity-preview">
304
+ <div style="opacity: 0.3"></div>
321
305
  </div>
322
306
 
323
307
  </td>
324
308
  </tr>
325
309
  <tr>
326
310
  <td class="with-icons is-vcentered"
327
- id="no-theme-boxShadow300"
328
- title="theme: no-theme; category: boxShadow; variant: 300; ">
329
- boxShadow300
330
- <a href="#no-theme-boxShadow300"
311
+ id="base-opacity600"
312
+ title="theme: base; category: opacity; variant: 600; ">
313
+ opacity600
314
+ <a href="#base-opacity600"
331
315
  title="permalink"
332
316
  class="permalink">
333
317
  🔗
334
318
  </a>
335
319
  </td>
336
320
  <td class="is-vcentered">
337
- <pre>0 30px 60px 0 #00b3db80</pre>
321
+ <pre>0.6</pre>
338
322
  </td>
339
323
  <td class="is-vcentered">
340
- <div class="table__box-shadow-preview"
341
- style="box-shadow: 0 30px 60px 0 #00b3db80">
324
+ <div class="table__opacity-preview">
325
+ <div style="opacity: 0.6"></div>
342
326
  </div>
343
327
 
344
328
  </td>
345
329
  </tr>
346
330
  <tr>
347
331
  <td class="with-icons is-vcentered"
348
- id="no-theme-boxShadow400"
349
- title="theme: no-theme; category: boxShadow; variant: 400; ">
350
- boxShadow400
351
- <a href="#no-theme-boxShadow400"
332
+ id="base-opacity800"
333
+ title="theme: base; category: opacity; variant: 800; ">
334
+ opacity800
335
+ <a href="#base-opacity800"
352
336
  title="permalink"
353
337
  class="permalink">
354
338
  🔗
355
339
  </a>
356
340
  </td>
357
341
  <td class="is-vcentered">
358
- <pre>0 50px 80px 0 #6000db80</pre>
342
+ <pre>0.8</pre>
359
343
  </td>
360
344
  <td class="is-vcentered">
361
- <div class="table__box-shadow-preview"
362
- style="box-shadow: 0 50px 80px 0 #6000db80">
345
+ <div class="table__opacity-preview">
346
+ <div style="opacity: 0.8"></div>
363
347
  </div>
364
348
 
365
349
  </td>