@pantheon-systems/pds-design-tokens 2.0.0-alpha.39 → 2.0.0-alpha.40

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 +13 -9
  2. package/build/css/variables.light.css +12 -8
  3. package/build/figma/tokens.json +287 -119
  4. package/package.json +1 -1
package/build/css/variables.dark.css CHANGED
@@ -213,10 +213,10 @@
213
213
  --pds-color-tag-warning-foreground: #570000;
214
214
  --pds-color-tag-critical-background: #ffc7b8;
215
215
  --pds-color-tag-critical-foreground: #730000;
216
- --pds-color-tag-info-background: #f4cfff;
217
- --pds-color-tag-info-foreground: #47007c;
218
- --pds-color-tag-discovery-background: #b4e5ff;
219
- --pds-color-tag-discovery-foreground: #00008e;
216
+ --pds-color-tag-info-background: #bcdeff;
217
+ --pds-color-tag-info-foreground: #1d00ac;
218
+ --pds-color-tag-discovery-background: #f4cfff;
219
+ --pds-color-tag-discovery-foreground: #47007c;
220
220
  --pds-color-tag-amber-background: #bb5900;
221
221
  --pds-color-tag-amber-foreground: oklch(1 0 0);
222
222
  --pds-color-tag-orange-background: #d24300;
@@ -252,7 +252,7 @@
252
252
  --pds-color-bg-default: oklch(0.2046 0 0);
253
253
  --pds-color-bg-default-secondary: oklch(0.1489 0.0027 248.08);
254
254
  --pds-color-bg-reverse: oklch(0.8388 0.003 264.54);
255
- --pds-color-border-default: oklch(0.4235 0.0071 264.49);
255
+ --pds-color-border-default: oklch(0.3554 0.0058 258.35);
256
256
  --pds-color-border-input: oklch(0.4235 0.0071 264.49);
257
257
  --pds-color-border-separator: oklch(0.5991 0 0);
258
258
  --pds-color-border-hover: oklch(0.5 0.005 264);
@@ -385,6 +385,8 @@
385
385
  --pds-color-input-placeholder: oklch(0.5991 0.0051 258.33);
386
386
  --pds-color-input-file-upload-button-background-default: oklch(0.2929 0.0039 264.51);
387
387
  --pds-color-input-file-upload-button-background-hover: oklch(0.3554 0.0058 258.35);
388
+ --pds-color-input-selected-background: oklch(0.5558 0.2372 267.79);
389
+ --pds-color-input-selected-foreground: oklch(1.0000 0 0);
388
390
  --pds-color-input-switch-icon: oklch(0.8388 0.003 264.54);
389
391
  --pds-color-input-tag-background-default: oklch(0.38 0 0);
390
392
  --pds-color-input-tag-background-hover: oklch(0.32 0 0);
@@ -397,14 +399,16 @@
397
399
  --pds-color-interactive-background-active: oklch(0.3554 0.0058 258.35);
398
400
  --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
399
401
  --pds-color-interactive-link-default: oklch(0.6575 0.177 272.74);
400
- --pds-color-interactive-link-hover: oklch(0.6311 0.2503 304.99);
402
+ --pds-color-interactive-link-hover: oklch(0.7973 0.1023 274.67);
401
403
  --pds-color-interactive-link-active: oklch(0.6311 0.2503 304.99);
402
404
  --pds-color-interactive-link-visited: oklch(0.6311 0.2503 304.99);
405
+ --pds-color-interactive-ui-hover: oklch(0.6575 0.177 272.74);
403
406
  --pds-color-interactive-reverse-focus: oklch(0.5558 0.2372 267.79);
404
407
  --pds-color-interactive-reverse-link-default: oklch(0.5558 0.2372 267.79);
405
- --pds-color-interactive-reverse-link-hover: oklch(0.542 0.2895 299.91);
408
+ --pds-color-interactive-reverse-link-hover: oklch(0.4125 0.1942 266.8);
406
409
  --pds-color-interactive-reverse-link-active: oklch(0.4682 0.2508 299.4);
407
410
  --pds-color-interactive-reverse-link-visited: oklch(0.4682 0.2508 299.4);
411
+ --pds-color-interactive-reverse-ui-hover: oklch(0.5558 0.2372 267.79);
408
412
  --pds-color-nav-side-nav-indicator-active: oklch(0.5308 0.2335 268.08);
409
413
  --pds-color-nav-side-nav-item-background-default: rgba(255, 255, 255, 0);
410
414
  --pds-color-nav-side-nav-item-background-hover: oklch(0.4235 0.0071 264.49);
@@ -452,10 +456,10 @@
452
456
  --pds-color-status-neutral-indicator: oklch(0.8388 0.003 264.54);
453
457
  --pds-color-status-frozen-dot: oklch(0.8816 0.0619 245.59);
454
458
  --pds-color-status-disabled-dot: oklch(0.8853 0 0);
455
- --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
456
- --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
457
459
  --pds-elevation-drawer-left: 2px 0px 32px 0px rgba(0, 0, 0, 0.8), 1px 0px 0px 0px rgba(255, 255, 255, 0.12);
458
460
  --pds-elevation-drawer-right: -2px 0px 32px 0px rgba(0, 0, 0, 0.8), -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
461
+ --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
462
+ --pds-elevation-draggable: 0px 0px 0px 1px rgba(76, 78, 82, 0.35), 0px 3px 10px 0px rgba(10, 11, 12, 0.60);
459
463
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
460
464
  --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
461
465
  --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
package/build/css/variables.light.css CHANGED
@@ -213,10 +213,10 @@
213
213
  --pds-color-tag-warning-foreground: #570000;
214
214
  --pds-color-tag-critical-background: #ffc7b8;
215
215
  --pds-color-tag-critical-foreground: #730000;
216
- --pds-color-tag-info-background: #f4cfff;
217
- --pds-color-tag-info-foreground: #47007c;
218
- --pds-color-tag-discovery-background: #b4e5ff;
219
- --pds-color-tag-discovery-foreground: #00008e;
216
+ --pds-color-tag-info-background: #bcdeff;
217
+ --pds-color-tag-info-foreground: #1d00ac;
218
+ --pds-color-tag-discovery-background: #f4cfff;
219
+ --pds-color-tag-discovery-foreground: #47007c;
220
220
  --pds-color-tag-amber-background: #bb5900;
221
221
  --pds-color-tag-amber-foreground: oklch(1 0 0);
222
222
  --pds-color-tag-orange-background: #d24300;
@@ -385,6 +385,8 @@
385
385
  --pds-color-input-placeholder: oklch(0.8047 0 0);
386
386
  --pds-color-input-file-upload-button-background-default: oklch(0.9702 0 0);
387
387
  --pds-color-input-file-upload-button-background-hover: oklch(0.9401 0 0);
388
+ --pds-color-input-selected-background: oklch(0.5558 0.2372 267.79);
389
+ --pds-color-input-selected-foreground: oklch(1.0000 0 0);
388
390
  --pds-color-input-switch-icon: oklch(1.0000 0 0);
389
391
  --pds-color-input-tag-background-default: oklch(0.907 0 0);
390
392
  --pds-color-input-tag-background-hover: oklch(0.87 0 0);
@@ -397,14 +399,16 @@
397
399
  --pds-color-interactive-background-active: oklch(0.9401 0 0);
398
400
  --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
399
401
  --pds-color-interactive-link-default: oklch(0.5558 0.2372 267.79);
400
- --pds-color-interactive-link-hover: oklch(0.542 0.2895 299.91);
402
+ --pds-color-interactive-link-hover: oklch(0.4125 0.1942 266.8);
401
403
  --pds-color-interactive-link-active: oklch(0.4682 0.2508 299.4);
402
404
  --pds-color-interactive-link-visited: oklch(0.4682 0.2508 299.4);
405
+ --pds-color-interactive-ui-hover: oklch(0.5558 0.2372 267.79);
403
406
  --pds-color-interactive-reverse-focus: oklch(0.5558 0.2372 267.79);
404
407
  --pds-color-interactive-reverse-link-default: oklch(0.5558 0.2372 267.79);
405
- --pds-color-interactive-reverse-link-hover: oklch(0.542 0.2895 299.91);
408
+ --pds-color-interactive-reverse-link-hover: oklch(0.7973 0.1023 274.67);
406
409
  --pds-color-interactive-reverse-link-active: oklch(0.6311 0.2503 304.99);
407
410
  --pds-color-interactive-reverse-link-visited: oklch(0.6311 0.2503 304.99);
411
+ --pds-color-interactive-reverse-ui-hover: oklch(0.5558 0.2372 267.79);
408
412
  --pds-color-nav-side-nav-indicator-active: oklch(0.5558 0.2372 267.79);
409
413
  --pds-color-nav-side-nav-item-background-default: rgba(255, 255, 255, 0);
410
414
  --pds-color-nav-side-nav-item-background-hover: oklch(0.9401 0 0);
@@ -452,10 +456,10 @@
452
456
  --pds-color-status-neutral-indicator: oklch(0.5103 0 0);
453
457
  --pds-color-status-frozen-dot: oklch(0.8816 0.0619 245.59);
454
458
  --pds-color-status-disabled-dot: oklch(0.8853 0 0);
455
- --pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
456
- --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);
457
459
  --pds-elevation-drawer-left: 4px 0px 16px 0px rgba(0, 0, 0, 0.08);
458
460
  --pds-elevation-drawer-right: -4px 0px 16px 0px rgba(0, 0, 0, 0.08);
461
+ --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);
462
+ --pds-elevation-draggable: 0px 0px 0px 1px rgba(23, 23, 23, 0.08), 0px 2px 4px 0px rgba(23, 23, 23, 0.12);
459
463
  --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);
460
464
  --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
461
465
  --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
package/build/figma/tokens.json CHANGED
@@ -2232,36 +2232,22 @@
2232
2232
  }
2233
2233
  }
2234
2234
  },
2235
- "drawer-left": {
2235
+ "draggable": {
2236
2236
  "value": [
2237
2237
  {
2238
- "x": "4",
2238
+ "x": "0",
2239
2239
  "y": "0",
2240
- "blur": "16",
2241
- "spread": "0",
2242
- "color": "rgba(0, 0, 0, 0.08)",
2240
+ "blur": "0",
2241
+ "spread": "1",
2242
+ "color": "rgba(23, 23, 23, 0.08)",
2243
2243
  "type": "dropShadow"
2244
- }
2245
- ],
2246
- "type": "boxShadow",
2247
- "$extensions": {
2248
- "public": true,
2249
- "com.figma": {
2250
- "exportAs": "style",
2251
- "codeSyntax": {
2252
- "WEB": "--pds-elevation-drawer-left"
2253
- }
2254
- }
2255
- }
2256
- },
2257
- "drawer-right": {
2258
- "value": [
2244
+ },
2259
2245
  {
2260
- "x": "-4",
2261
- "y": "0",
2262
- "blur": "16",
2246
+ "x": "0",
2247
+ "y": "2",
2248
+ "blur": "4",
2263
2249
  "spread": "0",
2264
- "color": "rgba(0, 0, 0, 0.08)",
2250
+ "color": "rgba(23, 23, 23, 0.12)",
2265
2251
  "type": "dropShadow"
2266
2252
  }
2267
2253
  ],
@@ -2271,7 +2257,7 @@
2271
2257
  "com.figma": {
2272
2258
  "exportAs": "style",
2273
2259
  "codeSyntax": {
2274
- "WEB": "--pds-elevation-drawer-right"
2260
+ "WEB": "--pds-elevation-draggable"
2275
2261
  }
2276
2262
  }
2277
2263
  }
@@ -4287,6 +4273,36 @@
4287
4273
  }
4288
4274
  }
4289
4275
  },
4276
+ "selected": {
4277
+ "background": {
4278
+ "value": "{color.light-mode.iris.500}",
4279
+ "type": "color",
4280
+ "$extensions": {
4281
+ "public": true,
4282
+ "resolveValue": true,
4283
+ "com.figma": {
4284
+ "exportAs": "variable",
4285
+ "codeSyntax": {
4286
+ "WEB": "--pds-color-input-selected-background"
4287
+ }
4288
+ }
4289
+ }
4290
+ },
4291
+ "foreground": {
4292
+ "value": "{color.light-mode.white}",
4293
+ "type": "color",
4294
+ "$extensions": {
4295
+ "public": true,
4296
+ "resolveValue": true,
4297
+ "com.figma": {
4298
+ "exportAs": "variable",
4299
+ "codeSyntax": {
4300
+ "WEB": "--pds-color-input-selected-foreground"
4301
+ }
4302
+ }
4303
+ }
4304
+ }
4305
+ },
4290
4306
  "switch": {
4291
4307
  "icon": {
4292
4308
  "value": "{color.light-mode.fg.reverse}",
@@ -4469,7 +4485,7 @@
4469
4485
  }
4470
4486
  },
4471
4487
  "hover": {
4472
- "value": "{color.light-mode.hypnos.500}",
4488
+ "value": "{color.light-mode.iris.700}",
4473
4489
  "type": "color",
4474
4490
  "$extensions": {
4475
4491
  "public": true,
@@ -4511,6 +4527,22 @@
4511
4527
  }
4512
4528
  }
4513
4529
  },
4530
+ "ui": {
4531
+ "hover": {
4532
+ "value": "{color.light-mode.iris.500}",
4533
+ "type": "color",
4534
+ "$extensions": {
4535
+ "public": true,
4536
+ "resolveValue": true,
4537
+ "com.figma": {
4538
+ "exportAs": "variable",
4539
+ "codeSyntax": {
4540
+ "WEB": "--pds-color-interactive-ui-hover"
4541
+ }
4542
+ }
4543
+ }
4544
+ }
4545
+ },
4514
4546
  "reverse": {
4515
4547
  "focus": {
4516
4548
  "value": "{color.dark-mode.iris.400}",
@@ -4542,7 +4574,7 @@
4542
4574
  }
4543
4575
  },
4544
4576
  "hover": {
4545
- "value": "{color.dark-mode.hypnos.400}",
4577
+ "value": "{color.dark-mode.iris.200}",
4546
4578
  "type": "color",
4547
4579
  "$extensions": {
4548
4580
  "public": true,
@@ -4583,6 +4615,22 @@
4583
4615
  }
4584
4616
  }
4585
4617
  }
4618
+ },
4619
+ "ui": {
4620
+ "hover": {
4621
+ "value": "{color.dark-mode.iris.400}",
4622
+ "type": "color",
4623
+ "$extensions": {
4624
+ "public": true,
4625
+ "resolveValue": true,
4626
+ "com.figma": {
4627
+ "exportAs": "variable",
4628
+ "codeSyntax": {
4629
+ "WEB": "--pds-color-interactive-reverse-ui-hover"
4630
+ }
4631
+ }
4632
+ }
4633
+ }
4586
4634
  }
4587
4635
  }
4588
4636
  },
@@ -8453,7 +8501,7 @@
8453
8501
  },
8454
8502
  "info": {
8455
8503
  "background": {
8456
- "value": "#f4cfff",
8504
+ "value": "#bcdeff",
8457
8505
  "type": "color",
8458
8506
  "$extensions": {
8459
8507
  "public": true,
@@ -8466,7 +8514,7 @@
8466
8514
  }
8467
8515
  },
8468
8516
  "foreground": {
8469
- "value": "#47007c",
8517
+ "value": "#1d00ac",
8470
8518
  "type": "color",
8471
8519
  "$extensions": {
8472
8520
  "public": true,
@@ -8481,7 +8529,7 @@
8481
8529
  },
8482
8530
  "discovery": {
8483
8531
  "background": {
8484
- "value": "#b4e5ff",
8532
+ "value": "#f4cfff",
8485
8533
  "type": "color",
8486
8534
  "$extensions": {
8487
8535
  "public": true,
@@ -8494,7 +8542,7 @@
8494
8542
  }
8495
8543
  },
8496
8544
  "foreground": {
8497
- "value": "#00008e",
8545
+ "value": "#47007c",
8498
8546
  "type": "color",
8499
8547
  "$extensions": {
8500
8548
  "public": true,
@@ -8969,22 +9017,36 @@
8969
9017
  }
8970
9018
  },
8971
9019
  "elevation": {
8972
- "dashboard": {
9020
+ "drawer-left": {
8973
9021
  "value": [
8974
9022
  {
8975
- "x": "1",
8976
- "y": "1",
8977
- "blur": "6",
8978
- "spread": "-2",
8979
- "color": "rgba(140, 140, 140, 0.2)",
9023
+ "x": "4",
9024
+ "y": "0",
9025
+ "blur": "16",
9026
+ "spread": "0",
9027
+ "color": "rgba(0, 0, 0, 0.08)",
8980
9028
  "type": "dropShadow"
8981
- },
9029
+ }
9030
+ ],
9031
+ "type": "boxShadow",
9032
+ "$extensions": {
9033
+ "public": true,
9034
+ "com.figma": {
9035
+ "exportAs": "style",
9036
+ "codeSyntax": {
9037
+ "WEB": "--pds-elevation-drawer-left"
9038
+ }
9039
+ }
9040
+ }
9041
+ },
9042
+ "drawer-right": {
9043
+ "value": [
8982
9044
  {
8983
- "x": "1",
8984
- "y": "1",
8985
- "blur": "0",
9045
+ "x": "-4",
9046
+ "y": "0",
9047
+ "blur": "16",
8986
9048
  "spread": "0",
8987
- "color": "#f9f9f9",
9049
+ "color": "rgba(0, 0, 0, 0.08)",
8988
9050
  "type": "dropShadow"
8989
9051
  }
8990
9052
  ],
@@ -8994,7 +9056,7 @@
8994
9056
  "com.figma": {
8995
9057
  "exportAs": "style",
8996
9058
  "codeSyntax": {
8997
- "WEB": "--pds-elevation-dashboard"
9059
+ "WEB": "--pds-elevation-drawer-right"
8998
9060
  }
8999
9061
  }
9000
9062
  }
@@ -9473,22 +9535,36 @@
9473
9535
  }
9474
9536
  },
9475
9537
  "elevation": {
9476
- "dashboard": {
9538
+ "drawer-left": {
9477
9539
  "value": [
9478
9540
  {
9479
- "x": "1",
9480
- "y": "1",
9481
- "blur": "6",
9482
- "spread": "-2",
9483
- "color": "rgba(140, 140, 140, 0.2)",
9541
+ "x": "4",
9542
+ "y": "0",
9543
+ "blur": "16",
9544
+ "spread": "0",
9545
+ "color": "rgba(0, 0, 0, 0.08)",
9484
9546
  "type": "dropShadow"
9485
- },
9547
+ }
9548
+ ],
9549
+ "type": "boxShadow",
9550
+ "$extensions": {
9551
+ "public": true,
9552
+ "com.figma": {
9553
+ "exportAs": "style",
9554
+ "codeSyntax": {
9555
+ "WEB": "--pds-elevation-drawer-left"
9556
+ }
9557
+ }
9558
+ }
9559
+ },
9560
+ "drawer-right": {
9561
+ "value": [
9486
9562
  {
9487
- "x": "1",
9488
- "y": "1",
9489
- "blur": "0",
9563
+ "x": "-4",
9564
+ "y": "0",
9565
+ "blur": "16",
9490
9566
  "spread": "0",
9491
- "color": "#f9f9f9",
9567
+ "color": "rgba(0, 0, 0, 0.08)",
9492
9568
  "type": "dropShadow"
9493
9569
  }
9494
9570
  ],
@@ -9498,7 +9574,7 @@
9498
9574
  "com.figma": {
9499
9575
  "exportAs": "style",
9500
9576
  "codeSyntax": {
9501
- "WEB": "--pds-elevation-dashboard"
9577
+ "WEB": "--pds-elevation-drawer-right"
9502
9578
  }
9503
9579
  }
9504
9580
  }
@@ -10183,52 +10259,22 @@
10183
10259
  }
10184
10260
  }
10185
10261
  },
10186
- "drawer-left": {
10262
+ "draggable": {
10187
10263
  "value": [
10188
10264
  {
10189
- "x": "2",
10190
- "y": "0",
10191
- "blur": "32",
10192
- "spread": "0",
10193
- "color": "rgba(0, 0, 0, 0.8)",
10194
- "type": "dropShadow"
10195
- },
10196
- {
10197
- "x": "1",
10265
+ "x": "0",
10198
10266
  "y": "0",
10199
10267
  "blur": "0",
10200
- "spread": "0",
10201
- "color": "rgba(255, 255, 255, 0.12)",
10202
- "type": "dropShadow"
10203
- }
10204
- ],
10205
- "type": "boxShadow",
10206
- "$extensions": {
10207
- "public": true,
10208
- "com.figma": {
10209
- "exportAs": "style",
10210
- "codeSyntax": {
10211
- "WEB": "--pds-elevation-drawer-left"
10212
- }
10213
- }
10214
- }
10215
- },
10216
- "drawer-right": {
10217
- "value": [
10218
- {
10219
- "x": "-2",
10220
- "y": "0",
10221
- "blur": "32",
10222
- "spread": "0",
10223
- "color": "rgba(0, 0, 0, 0.8)",
10268
+ "spread": "1",
10269
+ "color": "rgba(76, 78, 82, 0.35)",
10224
10270
  "type": "dropShadow"
10225
10271
  },
10226
10272
  {
10227
- "x": "-1",
10228
- "y": "0",
10229
- "blur": "0",
10273
+ "x": "0",
10274
+ "y": "3",
10275
+ "blur": "10",
10230
10276
  "spread": "0",
10231
- "color": "rgba(255, 255, 255, 0.12)",
10277
+ "color": "rgba(10, 11, 12, 0.60)",
10232
10278
  "type": "dropShadow"
10233
10279
  }
10234
10280
  ],
@@ -10238,7 +10284,7 @@
10238
10284
  "com.figma": {
10239
10285
  "exportAs": "style",
10240
10286
  "codeSyntax": {
10241
- "WEB": "--pds-elevation-drawer-right"
10287
+ "WEB": "--pds-elevation-draggable"
10242
10288
  }
10243
10289
  }
10244
10290
  }
@@ -10322,7 +10368,7 @@
10322
10368
  },
10323
10369
  "border": {
10324
10370
  "default": {
10325
- "value": "{color.dark-mode.aether.300}",
10371
+ "value": "{color.dark-mode.aether.400}",
10326
10372
  "type": "color",
10327
10373
  "$extensions": {
10328
10374
  "public": true,
@@ -12242,6 +12288,36 @@
12242
12288
  }
12243
12289
  }
12244
12290
  },
12291
+ "selected": {
12292
+ "background": {
12293
+ "value": "{color.dark-mode.iris.400}",
12294
+ "type": "color",
12295
+ "$extensions": {
12296
+ "public": true,
12297
+ "resolveValue": true,
12298
+ "com.figma": {
12299
+ "exportAs": "variable",
12300
+ "codeSyntax": {
12301
+ "WEB": "--pds-color-input-selected-background"
12302
+ }
12303
+ }
12304
+ }
12305
+ },
12306
+ "foreground": {
12307
+ "value": "{color.light-mode.white}",
12308
+ "type": "color",
12309
+ "$extensions": {
12310
+ "public": true,
12311
+ "resolveValue": true,
12312
+ "com.figma": {
12313
+ "exportAs": "variable",
12314
+ "codeSyntax": {
12315
+ "WEB": "--pds-color-input-selected-foreground"
12316
+ }
12317
+ }
12318
+ }
12319
+ }
12320
+ },
12245
12321
  "switch": {
12246
12322
  "icon": {
12247
12323
  "value": "{color.dark-mode.aether.100}",
@@ -12424,7 +12500,7 @@
12424
12500
  }
12425
12501
  },
12426
12502
  "hover": {
12427
- "value": "{color.dark-mode.hypnos.300}",
12503
+ "value": "{color.dark-mode.iris.200}",
12428
12504
  "type": "color",
12429
12505
  "$extensions": {
12430
12506
  "public": true,
@@ -12466,6 +12542,22 @@
12466
12542
  }
12467
12543
  }
12468
12544
  },
12545
+ "ui": {
12546
+ "hover": {
12547
+ "value": "{color.dark-mode.iris.300}",
12548
+ "type": "color",
12549
+ "$extensions": {
12550
+ "public": true,
12551
+ "resolveValue": true,
12552
+ "com.figma": {
12553
+ "exportAs": "variable",
12554
+ "codeSyntax": {
12555
+ "WEB": "--pds-color-interactive-ui-hover"
12556
+ }
12557
+ }
12558
+ }
12559
+ }
12560
+ },
12469
12561
  "reverse": {
12470
12562
  "focus": {
12471
12563
  "value": "{color.light-mode.iris.500}",
@@ -12497,7 +12589,7 @@
12497
12589
  }
12498
12590
  },
12499
12591
  "hover": {
12500
- "value": "{color.light-mode.hypnos.500}",
12592
+ "value": "{color.light-mode.iris.700}",
12501
12593
  "type": "color",
12502
12594
  "$extensions": {
12503
12595
  "public": true,
@@ -12538,6 +12630,22 @@
12538
12630
  }
12539
12631
  }
12540
12632
  }
12633
+ },
12634
+ "ui": {
12635
+ "hover": {
12636
+ "value": "{color.light-mode.iris.500}",
12637
+ "type": "color",
12638
+ "$extensions": {
12639
+ "public": true,
12640
+ "resolveValue": true,
12641
+ "com.figma": {
12642
+ "exportAs": "variable",
12643
+ "codeSyntax": {
12644
+ "WEB": "--pds-color-interactive-reverse-ui-hover"
12645
+ }
12646
+ }
12647
+ }
12648
+ }
12541
12649
  }
12542
12650
  }
12543
12651
  },
@@ -16408,7 +16516,7 @@
16408
16516
  },
16409
16517
  "info": {
16410
16518
  "background": {
16411
- "value": "#f4cfff",
16519
+ "value": "#bcdeff",
16412
16520
  "type": "color",
16413
16521
  "$extensions": {
16414
16522
  "public": true,
@@ -16421,7 +16529,7 @@
16421
16529
  }
16422
16530
  },
16423
16531
  "foreground": {
16424
- "value": "#47007c",
16532
+ "value": "#1d00ac",
16425
16533
  "type": "color",
16426
16534
  "$extensions": {
16427
16535
  "public": true,
@@ -16436,7 +16544,7 @@
16436
16544
  },
16437
16545
  "discovery": {
16438
16546
  "background": {
16439
- "value": "#b4e5ff",
16547
+ "value": "#f4cfff",
16440
16548
  "type": "color",
16441
16549
  "$extensions": {
16442
16550
  "public": true,
@@ -16449,7 +16557,7 @@
16449
16557
  }
16450
16558
  },
16451
16559
  "foreground": {
16452
- "value": "#00008e",
16560
+ "value": "#47007c",
16453
16561
  "type": "color",
16454
16562
  "$extensions": {
16455
16563
  "public": true,
@@ -16924,22 +17032,52 @@
16924
17032
  }
16925
17033
  },
16926
17034
  "elevation": {
16927
- "dashboard": {
17035
+ "drawer-left": {
16928
17036
  "value": [
16929
17037
  {
16930
- "x": "1",
16931
- "y": "1",
16932
- "blur": "6",
16933
- "spread": "-2",
16934
- "color": "rgba(80, 80, 80, 0.2)",
17038
+ "x": "2",
17039
+ "y": "0",
17040
+ "blur": "32",
17041
+ "spread": "0",
17042
+ "color": "rgba(0, 0, 0, 0.8)",
16935
17043
  "type": "dropShadow"
16936
17044
  },
16937
17045
  {
16938
17046
  "x": "1",
16939
- "y": "1",
17047
+ "y": "0",
17048
+ "blur": "0",
17049
+ "spread": "0",
17050
+ "color": "rgba(255, 255, 255, 0.12)",
17051
+ "type": "dropShadow"
17052
+ }
17053
+ ],
17054
+ "type": "boxShadow",
17055
+ "$extensions": {
17056
+ "public": true,
17057
+ "com.figma": {
17058
+ "exportAs": "style",
17059
+ "codeSyntax": {
17060
+ "WEB": "--pds-elevation-drawer-left"
17061
+ }
17062
+ }
17063
+ }
17064
+ },
17065
+ "drawer-right": {
17066
+ "value": [
17067
+ {
17068
+ "x": "-2",
17069
+ "y": "0",
17070
+ "blur": "32",
17071
+ "spread": "0",
17072
+ "color": "rgba(0, 0, 0, 0.8)",
17073
+ "type": "dropShadow"
17074
+ },
17075
+ {
17076
+ "x": "-1",
17077
+ "y": "0",
16940
17078
  "blur": "0",
16941
17079
  "spread": "0",
16942
- "color": "#1a1b20",
17080
+ "color": "rgba(255, 255, 255, 0.12)",
16943
17081
  "type": "dropShadow"
16944
17082
  }
16945
17083
  ],
@@ -16949,7 +17087,7 @@
16949
17087
  "com.figma": {
16950
17088
  "exportAs": "style",
16951
17089
  "codeSyntax": {
16952
- "WEB": "--pds-elevation-dashboard"
17090
+ "WEB": "--pds-elevation-drawer-right"
16953
17091
  }
16954
17092
  }
16955
17093
  }
@@ -17428,22 +17566,52 @@
17428
17566
  }
17429
17567
  },
17430
17568
  "elevation": {
17431
- "dashboard": {
17569
+ "drawer-left": {
17432
17570
  "value": [
17433
17571
  {
17434
- "x": "1",
17435
- "y": "1",
17436
- "blur": "6",
17437
- "spread": "-2",
17438
- "color": "rgba(80, 80, 80, 0.2)",
17572
+ "x": "2",
17573
+ "y": "0",
17574
+ "blur": "32",
17575
+ "spread": "0",
17576
+ "color": "rgba(0, 0, 0, 0.8)",
17439
17577
  "type": "dropShadow"
17440
17578
  },
17441
17579
  {
17442
17580
  "x": "1",
17443
- "y": "1",
17581
+ "y": "0",
17582
+ "blur": "0",
17583
+ "spread": "0",
17584
+ "color": "rgba(255, 255, 255, 0.12)",
17585
+ "type": "dropShadow"
17586
+ }
17587
+ ],
17588
+ "type": "boxShadow",
17589
+ "$extensions": {
17590
+ "public": true,
17591
+ "com.figma": {
17592
+ "exportAs": "style",
17593
+ "codeSyntax": {
17594
+ "WEB": "--pds-elevation-drawer-left"
17595
+ }
17596
+ }
17597
+ }
17598
+ },
17599
+ "drawer-right": {
17600
+ "value": [
17601
+ {
17602
+ "x": "-2",
17603
+ "y": "0",
17604
+ "blur": "32",
17605
+ "spread": "0",
17606
+ "color": "rgba(0, 0, 0, 0.8)",
17607
+ "type": "dropShadow"
17608
+ },
17609
+ {
17610
+ "x": "-1",
17611
+ "y": "0",
17444
17612
  "blur": "0",
17445
17613
  "spread": "0",
17446
- "color": "#1a1b20",
17614
+ "color": "rgba(255, 255, 255, 0.12)",
17447
17615
  "type": "dropShadow"
17448
17616
  }
17449
17617
  ],
@@ -17453,7 +17621,7 @@
17453
17621
  "com.figma": {
17454
17622
  "exportAs": "style",
17455
17623
  "codeSyntax": {
17456
- "WEB": "--pds-elevation-dashboard"
17624
+ "WEB": "--pds-elevation-drawer-right"
17457
17625
  }
17458
17626
  }
17459
17627
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
3
  "description": "Design Tokens for the Pantheon Design System",
4
- "version": "2.0.0-alpha.39",
4
+ "version": "2.0.0-alpha.40",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",