@pantheon-systems/pds-design-tokens 2.0.0-alpha.59 → 2.0.0-alpha.60

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 (4) hide show
  1. package/build/css/variables.dark.css +40 -65
  2. package/build/css/variables.light.css +58 -63
  3. package/build/figma/tokens.json +310 -792
  4. package/package.json +1 -1
package/build/css/variables.dark.css CHANGED
@@ -256,56 +256,47 @@
256
256
  --pds-color-code-inline-background: oklch(0.2603 0 0);
257
257
  --pds-color-code-inline-border: oklch(0.2931 0 0);
258
258
  --pds-color-code-inline-text: #ffffff;
259
- --pds-color-datavis-categorical-1: #00d4be;
260
- --pds-color-datavis-categorical-2: #5fa7ff;
261
- --pds-color-datavis-categorical-3: #b77ff2;
262
- --pds-color-datavis-categorical-4: #ff8e5f;
263
- --pds-color-datavis-sequential-blue-1: #eaf0ff;
264
- --pds-color-datavis-sequential-blue-2: #c6d6ff;
265
- --pds-color-datavis-sequential-blue-3: #9db9ff;
266
- --pds-color-datavis-sequential-blue-4: #749cff;
267
- --pds-color-datavis-sequential-blue-5: #5a7fff;
268
- --pds-color-datavis-sequential-blue-6: #4a6aee;
269
- --pds-color-datavis-sequential-blue-7: #6070d0;
270
- --pds-color-datavis-sequential-blue-8: #6878c8;
271
- --pds-color-datavis-sequential-neutral-1: #f5f5f5;
272
- --pds-color-datavis-sequential-neutral-2: #e0e0e0;
273
- --pds-color-datavis-sequential-neutral-3: #c8c8c8;
274
- --pds-color-datavis-sequential-neutral-4: #adadad;
275
- --pds-color-datavis-sequential-neutral-5: #979797;
276
- --pds-color-datavis-sequential-neutral-6: #838383;
277
- --pds-color-datavis-sequential-neutral-7: #737373;
278
- --pds-color-datavis-sequential-neutral-8: #6b6b6b;
279
- --pds-color-datavis-sequential-multi-1: #eaf0ff;
280
- --pds-color-datavis-sequential-multi-2: #c6d6ff;
281
- --pds-color-datavis-sequential-multi-3: #7bbcee;
282
- --pds-color-datavis-sequential-multi-4: #4aaec8;
283
- --pds-color-datavis-sequential-multi-5: #2a9eaa;
284
- --pds-color-datavis-sequential-multi-6: #1a9090;
285
- --pds-color-datavis-sequential-multi-7: #0e8080;
286
- --pds-color-datavis-sequential-multi-8: #0e7872;
287
- --pds-color-datavis-diverging-a-1: #008f7d;
288
- --pds-color-datavis-diverging-a-2: #3aada0;
289
- --pds-color-datavis-diverging-a-3: #72c4bb;
290
- --pds-color-datavis-diverging-a-4: #555555;
291
- --pds-color-datavis-diverging-a-5: #728fc4;
292
- --pds-color-datavis-diverging-a-6: #6080b8;
293
- --pds-color-datavis-diverging-a-7: #5878b0;
294
- --pds-color-datavis-diverging-b-1: #a850c8;
295
- --pds-color-datavis-diverging-b-2: #b868d0;
296
- --pds-color-datavis-diverging-b-3: #c090d8;
297
- --pds-color-datavis-diverging-b-4: #555555;
298
- --pds-color-datavis-diverging-b-5: #d49080;
299
- --pds-color-datavis-diverging-b-6: #c87050;
300
- --pds-color-datavis-diverging-b-7: #b85030;
301
- --pds-color-datavis-single-active: #749cff;
259
+ --pds-color-datavis-categorical-1: #398dea;
260
+ --pds-color-datavis-categorical-2: #d4705b;
261
+ --pds-color-datavis-categorical-3: #966fbf;
262
+ --pds-color-datavis-categorical-4: #b38217;
263
+ --pds-color-datavis-categorical-5: #0097ab;
264
+ --pds-color-datavis-categorical-6: #4d9f3a;
265
+ --pds-color-datavis-categorical-7: #cd5a97;
266
+ --pds-color-datavis-sequential-blue-1: #00316b;
267
+ --pds-color-datavis-sequential-blue-2: #004f9c;
268
+ --pds-color-datavis-sequential-blue-3: #226dbe;
269
+ --pds-color-datavis-sequential-blue-4: #4e8bd1;
270
+ --pds-color-datavis-sequential-blue-5: #76a3da;
271
+ --pds-color-datavis-sequential-blue-6: #97b4d7;
272
+ --pds-color-datavis-sequential-neutral-1: #2e2e2e;
273
+ --pds-color-datavis-sequential-neutral-2: #4b4b4b;
274
+ --pds-color-datavis-sequential-neutral-3: #6a6a6a;
275
+ --pds-color-datavis-sequential-neutral-4: #8b8b8b;
276
+ --pds-color-datavis-sequential-neutral-5: #adadad;
277
+ --pds-color-datavis-sequential-neutral-6: #d1d1d1;
278
+ --pds-color-datavis-diverging-a-1: #6b984c;
279
+ --pds-color-datavis-diverging-a-2: #587546;
280
+ --pds-color-datavis-diverging-a-3: #45533d;
281
+ --pds-color-datavis-diverging-a-4: #333333;
282
+ --pds-color-datavis-diverging-a-5: #3a506c;
283
+ --pds-color-datavis-diverging-a-6: #3c6ea9;
284
+ --pds-color-datavis-diverging-a-7: #398dea;
285
+ --pds-color-datavis-diverging-b-1: #d97560;
286
+ --pds-color-datavis-diverging-b-2: #9f5f51;
287
+ --pds-color-datavis-diverging-b-3: #674942;
288
+ --pds-color-datavis-diverging-b-4: #333333;
289
+ --pds-color-datavis-diverging-b-5: #52475f;
290
+ --pds-color-datavis-diverging-b-6: #735b8e;
291
+ --pds-color-datavis-diverging-b-7: #966fbf;
292
+ --pds-color-datavis-single-active: #398dea;
302
293
  --pds-color-datavis-single-muted: #404040;
303
- --pds-color-datavis-status-success: #43c463;
304
- --pds-color-datavis-status-critical: #de2e21;
305
- --pds-color-datavis-status-info: #4ba2ff;
306
- --pds-color-datavis-status-warning: #b06300;
307
- --pds-color-datavis-status-discovery: #6f3fa6;
308
- --pds-color-datavis-status-neutral: #b0b0b6;
294
+ --pds-color-datavis-status-success: #6b984c;
295
+ --pds-color-datavis-status-critical: #cc5050;
296
+ --pds-color-datavis-status-info: #398dea;
297
+ --pds-color-datavis-status-warning: #e08b38;
298
+ --pds-color-datavis-status-discovery: #966fbf;
299
+ --pds-color-datavis-status-neutral: #aeaeae;
309
300
  --pds-color-dropdown-background: oklch(0.2931 0 0);
310
301
  --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
311
302
  --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
@@ -418,22 +409,6 @@
418
409
  --pds-elevation-raised: 0px 0px 0px 1px rgba(130, 130, 130, 0.1), 0px 5px 10px 0px rgba(18, 18, 25, 0.6);
419
410
  --pds-elevation-draggable: 0px 2px 6px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.2);
420
411
  --pds-elevation-overlay: 0px 0px 0px 1px oklch(0.31 0.005 258), 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
421
- --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
422
- --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
423
- --pds-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
424
- --pds-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
425
- --pds-gradient-avatar-sundown: linear-gradient(135deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
426
- --pds-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
427
- --pds-gradient-avatar-plum: linear-gradient(135deg, #000006 0%, #782EA9 76.76%);
428
- --pds-gradient-avatar-grape: linear-gradient(315deg, #DE0093 0%, #5F41E5 100%);
429
- --pds-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
430
- --pds-gradient-avatar-winter: linear-gradient(315deg, #FFDC28 0%, #5F41E5 100%);
431
- --pds-gradient-avatar-spring: linear-gradient(315deg, #FFDC28 0%, #218C5F 100%);
432
- --pds-gradient-avatar-summer: linear-gradient(135deg, #FF00C5 0%, #F09737 100%);
433
- --pds-gradient-avatar-fall: linear-gradient(135deg, #CC36C9 0%, #FFFF11 100%);
434
- --pds-gradient-avatar-earth: linear-gradient(315deg, #6BC5FC 0%, #218C5F 100%);
435
- --pds-gradient-avatar-moon: linear-gradient(315deg, #A2CFFF 0%, #8A70FF 100%);
436
- --pds-gradient-avatar-sun: linear-gradient(135deg, #E65F35 0%, #FFFF11 100%);
437
412
  --pds-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
438
413
  --pds-gradient-card-mint: linear-gradient(225deg, #4BCE97 0%, #BAF3DB 100%);
439
414
  --pds-gradient-card-lavender: linear-gradient(225deg, #8A70FF 0%, #BFB1FF 100%);
package/build/css/variables.light.css CHANGED
@@ -256,56 +256,47 @@
256
256
  --pds-color-code-inline-background: oklch(0.9702 0 0);
257
257
  --pds-color-code-inline-border: oklch(0.9430 0 0);
258
258
  --pds-color-code-inline-text: oklch(0.2178 0 0);
259
- --pds-color-datavis-categorical-1: #00b29e;
260
- --pds-color-datavis-categorical-2: #3778d7;
261
- --pds-color-datavis-categorical-3: #8854bb;
262
- --pds-color-datavis-categorical-4: #ea6134;
263
- --pds-color-datavis-sequential-blue-1: #eaf0ff;
264
- --pds-color-datavis-sequential-blue-2: #c6d6ff;
265
- --pds-color-datavis-sequential-blue-3: #9db9ff;
266
- --pds-color-datavis-sequential-blue-4: #749cff;
267
- --pds-color-datavis-sequential-blue-5: #3a5dfb;
268
- --pds-color-datavis-sequential-blue-6: #2e4bd9;
269
- --pds-color-datavis-sequential-blue-7: #1d38b2;
270
- --pds-color-datavis-sequential-blue-8: #0e2177;
271
- --pds-color-datavis-sequential-neutral-1: #ebebeb;
272
- --pds-color-datavis-sequential-neutral-2: #cccccc;
273
- --pds-color-datavis-sequential-neutral-3: #adadad;
274
- --pds-color-datavis-sequential-neutral-4: #939393;
275
- --pds-color-datavis-sequential-neutral-5: #797979;
276
- --pds-color-datavis-sequential-neutral-6: #606060;
277
- --pds-color-datavis-sequential-neutral-7: #454545;
278
- --pds-color-datavis-sequential-neutral-8: #2c2c2c;
279
- --pds-color-datavis-sequential-multi-1: #eaf0ff;
280
- --pds-color-datavis-sequential-multi-2: #c6d6ff;
281
- --pds-color-datavis-sequential-multi-3: #9db9ff;
282
- --pds-color-datavis-sequential-multi-4: #5ab3d4;
283
- --pds-color-datavis-sequential-multi-5: #2b9ebb;
284
- --pds-color-datavis-sequential-multi-6: #1a8fa0;
285
- --pds-color-datavis-sequential-multi-7: #0a7a85;
286
- --pds-color-datavis-sequential-multi-8: #00896e;
287
- --pds-color-datavis-diverging-a-1: #00a793;
288
- --pds-color-datavis-diverging-a-2: #65ccbc;
289
- --pds-color-datavis-diverging-a-3: #b2ece2;
259
+ --pds-color-datavis-categorical-1: #006dcc;
260
+ --pds-color-datavis-categorical-2: #c95a3d;
261
+ --pds-color-datavis-categorical-3: #7952a8;
262
+ --pds-color-datavis-categorical-4: #a3741a;
263
+ --pds-color-datavis-categorical-5: #008b9c;
264
+ --pds-color-datavis-categorical-6: #34871d;
265
+ --pds-color-datavis-categorical-7: #b2417f;
266
+ --pds-color-datavis-sequential-blue-1: #d1e0f2;
267
+ --pds-color-datavis-sequential-blue-2: #b4d2f6;
268
+ --pds-color-datavis-sequential-blue-3: #84b5f0;
269
+ --pds-color-datavis-sequential-blue-4: #478ddd;
270
+ --pds-color-datavis-sequential-blue-5: #005db1;
271
+ --pds-color-datavis-sequential-blue-6: #002b67;
272
+ --pds-color-datavis-sequential-neutral-1: #dedede;
273
+ --pds-color-datavis-sequential-neutral-2: #b7b7b7;
274
+ --pds-color-datavis-sequential-neutral-3: #929292;
275
+ --pds-color-datavis-sequential-neutral-4: #6f6f6f;
276
+ --pds-color-datavis-sequential-neutral-5: #4d4d4d;
277
+ --pds-color-datavis-sequential-neutral-6: #2e2e2e;
278
+ --pds-color-datavis-diverging-a-1: #4f7e2b;
279
+ --pds-color-datavis-diverging-a-2: #8bb372;
280
+ --pds-color-datavis-diverging-a-3: #cee2c3;
290
281
  --pds-color-datavis-diverging-a-4: #e0e0e0;
291
- --pds-color-datavis-diverging-a-5: #c0d8f8;
292
- --pds-color-datavis-diverging-a-6: #8fb8f0;
293
- --pds-color-datavis-diverging-a-7: #5294f6;
294
- --pds-color-datavis-diverging-b-1: #7a2ca3;
295
- --pds-color-datavis-diverging-b-2: #a56fbd;
296
- --pds-color-datavis-diverging-b-3: #ccafd7;
282
+ --pds-color-datavis-diverging-a-5: #cde5ff;
283
+ --pds-color-datavis-diverging-a-6: #74b0f7;
284
+ --pds-color-datavis-diverging-a-7: #006dcc;
285
+ --pds-color-datavis-diverging-b-1: #c95a3d;
286
+ --pds-color-datavis-diverging-b-2: #e6967e;
287
+ --pds-color-datavis-diverging-b-3: #f8d8cc;
297
288
  --pds-color-datavis-diverging-b-4: #e0e0e0;
298
- --pds-color-datavis-diverging-b-5: #f9c2af;
299
- --pds-color-datavis-diverging-b-6: #f59371;
300
- --pds-color-datavis-diverging-b-7: #ea6134;
301
- --pds-color-datavis-single-active: #3a5dfb;
289
+ --pds-color-datavis-diverging-b-5: #e7dbf0;
290
+ --pds-color-datavis-diverging-b-6: #ac84cc;
291
+ --pds-color-datavis-diverging-b-7: #7952a8;
292
+ --pds-color-datavis-single-active: #006dcc;
302
293
  --pds-color-datavis-single-muted: #d9d9d9;
303
- --pds-color-datavis-status-success: #217a37;
304
- --pds-color-datavis-status-critical: #bc1c11;
305
- --pds-color-datavis-status-info: #006dda;
306
- --pds-color-datavis-status-warning: #ab6000;
307
- --pds-color-datavis-status-discovery: #6f20a5;
308
- --pds-color-datavis-status-neutral: #6a6e7a;
294
+ --pds-color-datavis-status-success: #4f7e2b;
295
+ --pds-color-datavis-status-critical: #be3232;
296
+ --pds-color-datavis-status-info: #006dcc;
297
+ --pds-color-datavis-status-warning: #ce7120;
298
+ --pds-color-datavis-status-discovery: #7952a8;
299
+ --pds-color-datavis-status-neutral: #717273;
309
300
  --pds-color-dropdown-background: var(--pds-color-surface-default);
310
301
  --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
311
302
  --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
@@ -418,22 +409,26 @@
418
409
  --pds-elevation-raised: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
419
410
  --pds-elevation-draggable: 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
420
411
  --pds-elevation-overlay: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
421
- --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
422
- --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
423
- --pds-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
424
- --pds-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
425
- --pds-gradient-avatar-sundown: linear-gradient(135deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
426
- --pds-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
427
- --pds-gradient-avatar-plum: linear-gradient(135deg, #000006 0%, #782EA9 76.76%);
428
- --pds-gradient-avatar-grape: linear-gradient(315deg, #DE0093 0%, #5F41E5 100%);
429
- --pds-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
430
- --pds-gradient-avatar-winter: linear-gradient(315deg, #FFDC28 0%, #5F41E5 100%);
431
- --pds-gradient-avatar-spring: linear-gradient(315deg, #FFDC28 0%, #218C5F 100%);
432
- --pds-gradient-avatar-summer: linear-gradient(135deg, #FF00C5 0%, #F09737 100%);
433
- --pds-gradient-avatar-fall: linear-gradient(135deg, #CC36C9 0%, #FFFF11 100%);
434
- --pds-gradient-avatar-earth: linear-gradient(315deg, #6BC5FC 0%, #218C5F 100%);
435
- --pds-gradient-avatar-moon: linear-gradient(315deg, #A2CFFF 0%, #8A70FF 100%);
436
- --pds-gradient-avatar-sun: linear-gradient(135deg, #E65F35 0%, #FFFF11 100%);
412
+ --pds-gradient-avatar-10: linear-gradient(315deg, #d59e00 0%, #0099c1 100%);
413
+ --pds-gradient-avatar-11: linear-gradient(0deg, #7fb35c 0%, #0038a3 100%);
414
+ --pds-gradient-avatar-12: linear-gradient(225deg, #00b6d0 0%, #ca449a 100%);
415
+ --pds-gradient-avatar-13: linear-gradient(45deg, #a5aa00 0%, #7f0059 100%);
416
+ --pds-gradient-avatar-14: linear-gradient(180deg, #33bb92 0%, #985cdb 100%);
417
+ --pds-gradient-avatar-15: linear-gradient(135deg, #e77e7c 0%, #8e5600 100%);
418
+ --pds-gradient-avatar-16: linear-gradient(225deg, #7fb35c 0%, #00a099 100%);
419
+ --pds-gradient-avatar-17: linear-gradient(315deg, #e68265 0%, #7f0059 100%);
420
+ --pds-gradient-avatar-18: linear-gradient(160deg, #00b6d0 0%, #8c0000 100%);
421
+ --pds-gradient-avatar-19: linear-gradient(45deg, #67a4f1 0%, #590c92 100%);
422
+ --pds-gradient-avatar-20: linear-gradient(135deg, #00b6d0 0%, #0038a3 85%);
423
+ --pds-gradient-avatar-01: linear-gradient(0deg, #e77e7c 0%, #8d0007 100%);
424
+ --pds-gradient-avatar-02: linear-gradient(45deg, #00b6d0 0%, #00557c 100%);
425
+ --pds-gradient-avatar-03: linear-gradient(90deg, #a5aa00 0%, #626400 100%);
426
+ --pds-gradient-avatar-04: linear-gradient(135deg, #b28ce4 0%, #590c92 100%);
427
+ --pds-gradient-avatar-05: linear-gradient(180deg, #67a4f1 0%, #0038a3 100%);
428
+ --pds-gradient-avatar-06: linear-gradient(225deg, #dc8c45 0%, #830600 100%);
429
+ --pds-gradient-avatar-07: linear-gradient(45deg, #d59e00 0%, #8e5600 100%);
430
+ --pds-gradient-avatar-08: linear-gradient(270deg, #87a7ba 0%, #345162 100%);
431
+ --pds-gradient-avatar-09: linear-gradient(225deg, #e68265 0%, #3424a3 100%);
437
432
  --pds-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
438
433
  --pds-gradient-card-mint: linear-gradient(225deg, #4BCE97 0%, #BAF3DB 100%);
439
434
  --pds-gradient-card-lavender: linear-gradient(225deg, #8A70FF 0%, #BFB1FF 100%);