@pantheon-systems/pds-design-tokens 0.6.0-dev.2 → 0.7.0-dev.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.
- package/build/css/pds-design-tokens-dark-mode.css +14 -14
- package/build/css/pds-design-tokens-light-mode.css +14 -14
- package/build/figma/pds-design-tokens-figma.json +180 -132
- package/build/json/pds-design-tokens-dark-mode.json +59 -55
- package/build/json/pds-design-tokens-light-mode.json +75 -55
- package/build/scss/_pds-design-tokens-dark-mode.scss +14 -14
- package/build/scss/_pds-design-tokens-light-mode.scss +14 -14
- package/package.json +1 -1
|
@@ -1135,7 +1135,7 @@
|
|
|
1135
1135
|
}
|
|
1136
1136
|
}
|
|
1137
1137
|
},
|
|
1138
|
-
"
|
|
1138
|
+
"critical": {
|
|
1139
1139
|
"background": {
|
|
1140
1140
|
"default": {
|
|
1141
1141
|
"value": "#d61f1f",
|
|
@@ -1148,19 +1148,19 @@
|
|
|
1148
1148
|
"public": true,
|
|
1149
1149
|
"isReferenceToInternal": true
|
|
1150
1150
|
},
|
|
1151
|
-
"name": "color-light-mode-button-
|
|
1151
|
+
"name": "color-light-mode-button-critical-background-default",
|
|
1152
1152
|
"attributes": {
|
|
1153
1153
|
"category": "color",
|
|
1154
1154
|
"type": "light-mode",
|
|
1155
1155
|
"item": "button",
|
|
1156
|
-
"subitem": "
|
|
1156
|
+
"subitem": "critical",
|
|
1157
1157
|
"state": "background"
|
|
1158
1158
|
},
|
|
1159
1159
|
"path": [
|
|
1160
1160
|
"color",
|
|
1161
1161
|
"light-mode",
|
|
1162
1162
|
"button",
|
|
1163
|
-
"
|
|
1163
|
+
"critical",
|
|
1164
1164
|
"background",
|
|
1165
1165
|
"default"
|
|
1166
1166
|
]
|
|
@@ -1176,19 +1176,19 @@
|
|
|
1176
1176
|
"public": true,
|
|
1177
1177
|
"isReferenceToInternal": true
|
|
1178
1178
|
},
|
|
1179
|
-
"name": "color-light-mode-button-
|
|
1179
|
+
"name": "color-light-mode-button-critical-background-hover",
|
|
1180
1180
|
"attributes": {
|
|
1181
1181
|
"category": "color",
|
|
1182
1182
|
"type": "light-mode",
|
|
1183
1183
|
"item": "button",
|
|
1184
|
-
"subitem": "
|
|
1184
|
+
"subitem": "critical",
|
|
1185
1185
|
"state": "background"
|
|
1186
1186
|
},
|
|
1187
1187
|
"path": [
|
|
1188
1188
|
"color",
|
|
1189
1189
|
"light-mode",
|
|
1190
1190
|
"button",
|
|
1191
|
-
"
|
|
1191
|
+
"critical",
|
|
1192
1192
|
"background",
|
|
1193
1193
|
"hover"
|
|
1194
1194
|
]
|
|
@@ -1204,19 +1204,19 @@
|
|
|
1204
1204
|
"public": true,
|
|
1205
1205
|
"isReferenceToInternal": true
|
|
1206
1206
|
},
|
|
1207
|
-
"name": "color-light-mode-button-
|
|
1207
|
+
"name": "color-light-mode-button-critical-background-active",
|
|
1208
1208
|
"attributes": {
|
|
1209
1209
|
"category": "color",
|
|
1210
1210
|
"type": "light-mode",
|
|
1211
1211
|
"item": "button",
|
|
1212
|
-
"subitem": "
|
|
1212
|
+
"subitem": "critical",
|
|
1213
1213
|
"state": "background"
|
|
1214
1214
|
},
|
|
1215
1215
|
"path": [
|
|
1216
1216
|
"color",
|
|
1217
1217
|
"light-mode",
|
|
1218
1218
|
"button",
|
|
1219
|
-
"
|
|
1219
|
+
"critical",
|
|
1220
1220
|
"background",
|
|
1221
1221
|
"active"
|
|
1222
1222
|
]
|
|
@@ -1232,19 +1232,19 @@
|
|
|
1232
1232
|
"public": true,
|
|
1233
1233
|
"isReferenceToInternal": true
|
|
1234
1234
|
},
|
|
1235
|
-
"name": "color-light-mode-button-
|
|
1235
|
+
"name": "color-light-mode-button-critical-background-focus",
|
|
1236
1236
|
"attributes": {
|
|
1237
1237
|
"category": "color",
|
|
1238
1238
|
"type": "light-mode",
|
|
1239
1239
|
"item": "button",
|
|
1240
|
-
"subitem": "
|
|
1240
|
+
"subitem": "critical",
|
|
1241
1241
|
"state": "background"
|
|
1242
1242
|
},
|
|
1243
1243
|
"path": [
|
|
1244
1244
|
"color",
|
|
1245
1245
|
"light-mode",
|
|
1246
1246
|
"button",
|
|
1247
|
-
"
|
|
1247
|
+
"critical",
|
|
1248
1248
|
"background",
|
|
1249
1249
|
"focus"
|
|
1250
1250
|
]
|
|
@@ -1262,19 +1262,19 @@
|
|
|
1262
1262
|
"public": true,
|
|
1263
1263
|
"isReferenceToInternal": true
|
|
1264
1264
|
},
|
|
1265
|
-
"name": "color-light-mode-button-
|
|
1265
|
+
"name": "color-light-mode-button-critical-border-default",
|
|
1266
1266
|
"attributes": {
|
|
1267
1267
|
"category": "color",
|
|
1268
1268
|
"type": "light-mode",
|
|
1269
1269
|
"item": "button",
|
|
1270
|
-
"subitem": "
|
|
1270
|
+
"subitem": "critical",
|
|
1271
1271
|
"state": "border"
|
|
1272
1272
|
},
|
|
1273
1273
|
"path": [
|
|
1274
1274
|
"color",
|
|
1275
1275
|
"light-mode",
|
|
1276
1276
|
"button",
|
|
1277
|
-
"
|
|
1277
|
+
"critical",
|
|
1278
1278
|
"border",
|
|
1279
1279
|
"default"
|
|
1280
1280
|
]
|
|
@@ -1290,19 +1290,19 @@
|
|
|
1290
1290
|
"public": true,
|
|
1291
1291
|
"isReferenceToInternal": true
|
|
1292
1292
|
},
|
|
1293
|
-
"name": "color-light-mode-button-
|
|
1293
|
+
"name": "color-light-mode-button-critical-border-hover",
|
|
1294
1294
|
"attributes": {
|
|
1295
1295
|
"category": "color",
|
|
1296
1296
|
"type": "light-mode",
|
|
1297
1297
|
"item": "button",
|
|
1298
|
-
"subitem": "
|
|
1298
|
+
"subitem": "critical",
|
|
1299
1299
|
"state": "border"
|
|
1300
1300
|
},
|
|
1301
1301
|
"path": [
|
|
1302
1302
|
"color",
|
|
1303
1303
|
"light-mode",
|
|
1304
1304
|
"button",
|
|
1305
|
-
"
|
|
1305
|
+
"critical",
|
|
1306
1306
|
"border",
|
|
1307
1307
|
"hover"
|
|
1308
1308
|
]
|
|
@@ -1318,19 +1318,19 @@
|
|
|
1318
1318
|
"public": true,
|
|
1319
1319
|
"isReferenceToInternal": true
|
|
1320
1320
|
},
|
|
1321
|
-
"name": "color-light-mode-button-
|
|
1321
|
+
"name": "color-light-mode-button-critical-border-active",
|
|
1322
1322
|
"attributes": {
|
|
1323
1323
|
"category": "color",
|
|
1324
1324
|
"type": "light-mode",
|
|
1325
1325
|
"item": "button",
|
|
1326
|
-
"subitem": "
|
|
1326
|
+
"subitem": "critical",
|
|
1327
1327
|
"state": "border"
|
|
1328
1328
|
},
|
|
1329
1329
|
"path": [
|
|
1330
1330
|
"color",
|
|
1331
1331
|
"light-mode",
|
|
1332
1332
|
"button",
|
|
1333
|
-
"
|
|
1333
|
+
"critical",
|
|
1334
1334
|
"border",
|
|
1335
1335
|
"active"
|
|
1336
1336
|
]
|
|
@@ -1346,19 +1346,19 @@
|
|
|
1346
1346
|
"public": true,
|
|
1347
1347
|
"isReferenceToInternal": true
|
|
1348
1348
|
},
|
|
1349
|
-
"name": "color-light-mode-button-
|
|
1349
|
+
"name": "color-light-mode-button-critical-border-focus",
|
|
1350
1350
|
"attributes": {
|
|
1351
1351
|
"category": "color",
|
|
1352
1352
|
"type": "light-mode",
|
|
1353
1353
|
"item": "button",
|
|
1354
|
-
"subitem": "
|
|
1354
|
+
"subitem": "critical",
|
|
1355
1355
|
"state": "border"
|
|
1356
1356
|
},
|
|
1357
1357
|
"path": [
|
|
1358
1358
|
"color",
|
|
1359
1359
|
"light-mode",
|
|
1360
1360
|
"button",
|
|
1361
|
-
"
|
|
1361
|
+
"critical",
|
|
1362
1362
|
"border",
|
|
1363
1363
|
"focus"
|
|
1364
1364
|
]
|
|
@@ -1376,19 +1376,19 @@
|
|
|
1376
1376
|
"public": true,
|
|
1377
1377
|
"isReferenceToInternal": true
|
|
1378
1378
|
},
|
|
1379
|
-
"name": "color-light-mode-button-
|
|
1379
|
+
"name": "color-light-mode-button-critical-foreground-default",
|
|
1380
1380
|
"attributes": {
|
|
1381
1381
|
"category": "color",
|
|
1382
1382
|
"type": "light-mode",
|
|
1383
1383
|
"item": "button",
|
|
1384
|
-
"subitem": "
|
|
1384
|
+
"subitem": "critical",
|
|
1385
1385
|
"state": "foreground"
|
|
1386
1386
|
},
|
|
1387
1387
|
"path": [
|
|
1388
1388
|
"color",
|
|
1389
1389
|
"light-mode",
|
|
1390
1390
|
"button",
|
|
1391
|
-
"
|
|
1391
|
+
"critical",
|
|
1392
1392
|
"foreground",
|
|
1393
1393
|
"default"
|
|
1394
1394
|
]
|
|
@@ -1404,19 +1404,19 @@
|
|
|
1404
1404
|
"public": true,
|
|
1405
1405
|
"isReferenceToInternal": true
|
|
1406
1406
|
},
|
|
1407
|
-
"name": "color-light-mode-button-
|
|
1407
|
+
"name": "color-light-mode-button-critical-foreground-hover",
|
|
1408
1408
|
"attributes": {
|
|
1409
1409
|
"category": "color",
|
|
1410
1410
|
"type": "light-mode",
|
|
1411
1411
|
"item": "button",
|
|
1412
|
-
"subitem": "
|
|
1412
|
+
"subitem": "critical",
|
|
1413
1413
|
"state": "foreground"
|
|
1414
1414
|
},
|
|
1415
1415
|
"path": [
|
|
1416
1416
|
"color",
|
|
1417
1417
|
"light-mode",
|
|
1418
1418
|
"button",
|
|
1419
|
-
"
|
|
1419
|
+
"critical",
|
|
1420
1420
|
"foreground",
|
|
1421
1421
|
"hover"
|
|
1422
1422
|
]
|
|
@@ -1432,19 +1432,19 @@
|
|
|
1432
1432
|
"public": true,
|
|
1433
1433
|
"isReferenceToInternal": true
|
|
1434
1434
|
},
|
|
1435
|
-
"name": "color-light-mode-button-
|
|
1435
|
+
"name": "color-light-mode-button-critical-foreground-active",
|
|
1436
1436
|
"attributes": {
|
|
1437
1437
|
"category": "color",
|
|
1438
1438
|
"type": "light-mode",
|
|
1439
1439
|
"item": "button",
|
|
1440
|
-
"subitem": "
|
|
1440
|
+
"subitem": "critical",
|
|
1441
1441
|
"state": "foreground"
|
|
1442
1442
|
},
|
|
1443
1443
|
"path": [
|
|
1444
1444
|
"color",
|
|
1445
1445
|
"light-mode",
|
|
1446
1446
|
"button",
|
|
1447
|
-
"
|
|
1447
|
+
"critical",
|
|
1448
1448
|
"foreground",
|
|
1449
1449
|
"active"
|
|
1450
1450
|
]
|
|
@@ -1460,19 +1460,19 @@
|
|
|
1460
1460
|
"public": true,
|
|
1461
1461
|
"isReferenceToInternal": true
|
|
1462
1462
|
},
|
|
1463
|
-
"name": "color-light-mode-button-
|
|
1463
|
+
"name": "color-light-mode-button-critical-foreground-focus",
|
|
1464
1464
|
"attributes": {
|
|
1465
1465
|
"category": "color",
|
|
1466
1466
|
"type": "light-mode",
|
|
1467
1467
|
"item": "button",
|
|
1468
|
-
"subitem": "
|
|
1468
|
+
"subitem": "critical",
|
|
1469
1469
|
"state": "foreground"
|
|
1470
1470
|
},
|
|
1471
1471
|
"path": [
|
|
1472
1472
|
"color",
|
|
1473
1473
|
"light-mode",
|
|
1474
1474
|
"button",
|
|
1475
|
-
"
|
|
1475
|
+
"critical",
|
|
1476
1476
|
"foreground",
|
|
1477
1477
|
"focus"
|
|
1478
1478
|
]
|
|
@@ -3276,20 +3276,30 @@
|
|
|
3276
3276
|
"elevation": {
|
|
3277
3277
|
"light-mode": {
|
|
3278
3278
|
"raised": {
|
|
3279
|
-
"value": "0px
|
|
3279
|
+
"value": "0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25)",
|
|
3280
3280
|
"type": "boxShadow",
|
|
3281
3281
|
"public": true,
|
|
3282
3282
|
"filePath": "tokens/elevation/base.light.json",
|
|
3283
3283
|
"isSource": true,
|
|
3284
3284
|
"original": {
|
|
3285
|
-
"value":
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3285
|
+
"value": [
|
|
3286
|
+
{
|
|
3287
|
+
"x": "0",
|
|
3288
|
+
"y": "1",
|
|
3289
|
+
"blur": "1",
|
|
3290
|
+
"spread": "0",
|
|
3291
|
+
"color": "#aeaeb6",
|
|
3292
|
+
"type": "dropShadow"
|
|
3293
|
+
},
|
|
3294
|
+
{
|
|
3295
|
+
"x": "0",
|
|
3296
|
+
"y": "0",
|
|
3297
|
+
"blur": "1",
|
|
3298
|
+
"spread": "0",
|
|
3299
|
+
"color": "rgba(18, 18, 25, 0.25)",
|
|
3300
|
+
"type": "dropShadow"
|
|
3301
|
+
}
|
|
3302
|
+
],
|
|
3293
3303
|
"type": "boxShadow",
|
|
3294
3304
|
"public": true
|
|
3295
3305
|
},
|
|
@@ -3306,20 +3316,30 @@
|
|
|
3306
3316
|
]
|
|
3307
3317
|
},
|
|
3308
3318
|
"overlay": {
|
|
3309
|
-
"value": "0px
|
|
3319
|
+
"value": "0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25)",
|
|
3310
3320
|
"type": "boxShadow",
|
|
3311
3321
|
"public": true,
|
|
3312
3322
|
"filePath": "tokens/elevation/base.light.json",
|
|
3313
3323
|
"isSource": true,
|
|
3314
3324
|
"original": {
|
|
3315
|
-
"value":
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3325
|
+
"value": [
|
|
3326
|
+
{
|
|
3327
|
+
"x": "0",
|
|
3328
|
+
"y": "8",
|
|
3329
|
+
"blur": "12",
|
|
3330
|
+
"spread": "0",
|
|
3331
|
+
"color": "rgba(113, 113, 124, 0.25)",
|
|
3332
|
+
"type": "dropShadow"
|
|
3333
|
+
},
|
|
3334
|
+
{
|
|
3335
|
+
"x": "0",
|
|
3336
|
+
"y": "0",
|
|
3337
|
+
"blur": "1",
|
|
3338
|
+
"spread": "0",
|
|
3339
|
+
"color": "rgba(18, 18, 25, 0.25)",
|
|
3340
|
+
"type": "dropShadow"
|
|
3341
|
+
}
|
|
3342
|
+
],
|
|
3323
3343
|
"type": "boxShadow",
|
|
3324
3344
|
"public": true
|
|
3325
3345
|
},
|
|
@@ -13,18 +13,18 @@ $pds-color-border-default: #504e62;
|
|
|
13
13
|
$pds-color-brand-accent-default: #de0093;
|
|
14
14
|
$pds-color-brand-primary-default: #ffdc28;
|
|
15
15
|
$pds-color-brand-secondary-default: #3017a1;
|
|
16
|
-
$pds-color-button-
|
|
17
|
-
$pds-color-button-
|
|
18
|
-
$pds-color-button-
|
|
19
|
-
$pds-color-button-
|
|
20
|
-
$pds-color-button-
|
|
21
|
-
$pds-color-button-
|
|
22
|
-
$pds-color-button-
|
|
23
|
-
$pds-color-button-
|
|
24
|
-
$pds-color-button-
|
|
25
|
-
$pds-color-button-
|
|
26
|
-
$pds-color-button-
|
|
27
|
-
$pds-color-button-
|
|
16
|
+
$pds-color-button-critical-background-active: rgba(0, 0, 0, 0);
|
|
17
|
+
$pds-color-button-critical-background-default: rgba(0, 0, 0, 0);
|
|
18
|
+
$pds-color-button-critical-background-focus: rgba(0, 0, 0, 0);
|
|
19
|
+
$pds-color-button-critical-background-hover: rgba(0, 0, 0, 0);
|
|
20
|
+
$pds-color-button-critical-border-active: #be4242;
|
|
21
|
+
$pds-color-button-critical-border-default: #be4242;
|
|
22
|
+
$pds-color-button-critical-border-focus: #be4242;
|
|
23
|
+
$pds-color-button-critical-border-hover: #ffafaf;
|
|
24
|
+
$pds-color-button-critical-foreground-active: #be4242;
|
|
25
|
+
$pds-color-button-critical-foreground-default: #e05757;
|
|
26
|
+
$pds-color-button-critical-foreground-focus: #e05757;
|
|
27
|
+
$pds-color-button-critical-foreground-hover: #ffafaf;
|
|
28
28
|
$pds-color-button-primary-background-active: #ddbd16;
|
|
29
29
|
$pds-color-button-primary-background-default: #ffdc28;
|
|
30
30
|
$pds-color-button-primary-background-focus: #ddbd16;
|
|
@@ -75,5 +75,5 @@ $pds-color-link-visited: #967fff;
|
|
|
75
75
|
$pds-color-text-default: #ffffff;
|
|
76
76
|
$pds-color-text-headings: $pds-color-text-default;
|
|
77
77
|
$pds-color-text-paragraph: $pds-color-text-default;
|
|
78
|
-
$pds-elevation-overlay: 0px
|
|
79
|
-
$pds-elevation-raised: 0px
|
|
78
|
+
$pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
|
|
79
|
+
$pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
|
|
@@ -13,18 +13,18 @@ $pds-color-border-default: #71717c;
|
|
|
13
13
|
$pds-color-brand-accent-default: #de0093;
|
|
14
14
|
$pds-color-brand-primary-default: #ffdc28;
|
|
15
15
|
$pds-color-brand-secondary-default: #3017a1;
|
|
16
|
-
$pds-color-button-
|
|
17
|
-
$pds-color-button-
|
|
18
|
-
$pds-color-button-
|
|
19
|
-
$pds-color-button-
|
|
20
|
-
$pds-color-button-
|
|
21
|
-
$pds-color-button-
|
|
22
|
-
$pds-color-button-
|
|
23
|
-
$pds-color-button-
|
|
24
|
-
$pds-color-button-
|
|
25
|
-
$pds-color-button-
|
|
26
|
-
$pds-color-button-
|
|
27
|
-
$pds-color-button-
|
|
16
|
+
$pds-color-button-critical-background-active: #920303;
|
|
17
|
+
$pds-color-button-critical-background-default: #d61f1f;
|
|
18
|
+
$pds-color-button-critical-background-focus: #ffebeb;
|
|
19
|
+
$pds-color-button-critical-background-hover: #f83333;
|
|
20
|
+
$pds-color-button-critical-border-active: #920303;
|
|
21
|
+
$pds-color-button-critical-border-default: #d61f1f;
|
|
22
|
+
$pds-color-button-critical-border-focus: #d61f1f;
|
|
23
|
+
$pds-color-button-critical-border-hover: #f83333;
|
|
24
|
+
$pds-color-button-critical-foreground-active: #ffffff;
|
|
25
|
+
$pds-color-button-critical-foreground-default: #ffffff;
|
|
26
|
+
$pds-color-button-critical-foreground-focus: #f83333;
|
|
27
|
+
$pds-color-button-critical-foreground-hover: #ffffff;
|
|
28
28
|
$pds-color-button-primary-background-active: #ddbd16;
|
|
29
29
|
$pds-color-button-primary-background-default: #ffdc28;
|
|
30
30
|
$pds-color-button-primary-background-focus: #ffe668;
|
|
@@ -75,5 +75,5 @@ $pds-color-link-visited: #967fff;
|
|
|
75
75
|
$pds-color-text-default: #23232d;
|
|
76
76
|
$pds-color-text-headings: $pds-color-text-default;
|
|
77
77
|
$pds-color-text-paragraph: #23232d;
|
|
78
|
-
$pds-elevation-overlay: 0px
|
|
79
|
-
$pds-elevation-raised: 0px
|
|
78
|
+
$pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
|
|
79
|
+
$pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
|