@pantheon-systems/pds-design-tokens 1.0.0-dev.22 → 1.0.0-dev.24
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 +1 -0
- package/build/css/pds-design-tokens-light-mode.css +7 -6
- package/build/figma/pds-design-tokens-figma.json +62 -8
- package/build/json/pds-design-tokens-dark-mode.json +27 -0
- package/build/json/pds-design-tokens-light-mode.json +35 -8
- package/build/scss/_pds-design-tokens-dark-mode.scss +1 -0
- package/build/scss/_pds-design-tokens-light-mode.scss +7 -6
- package/package.json +1 -1
|
@@ -113,6 +113,7 @@
|
|
|
113
113
|
--pds-color-text-overline: var(--pds-color-text-default-secondary);
|
|
114
114
|
--pds-color-text-paragraph: var(--pds-color-text-default);
|
|
115
115
|
--pds-color-text-quote: var(--pds-color-text-default-secondary);
|
|
116
|
+
--pds-color-tile-background-active: #858299;
|
|
116
117
|
--pds-color-tile-background-hover: #504e62;
|
|
117
118
|
--pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
|
|
118
119
|
--pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
--pds-color-button-brand-foreground-hover: #23232d;
|
|
27
27
|
--pds-color-button-brand-secondary-background-active: #cfcfd3;
|
|
28
28
|
--pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
|
|
29
|
-
--pds-color-button-brand-secondary-background-hover: #
|
|
29
|
+
--pds-color-button-brand-secondary-background-hover: #f8f8f8;
|
|
30
30
|
--pds-color-button-brand-secondary-border-active: #23232d;
|
|
31
31
|
--pds-color-button-brand-secondary-border-default: #71717c;
|
|
32
32
|
--pds-color-button-brand-secondary-border-hover: #23232d;
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
--pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
|
|
73
73
|
--pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
|
|
74
74
|
--pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
|
|
75
|
-
--pds-color-input-action-background-hover: #
|
|
75
|
+
--pds-color-input-action-background-hover: #f8f8f8;
|
|
76
76
|
--pds-color-input-background-critical: #ffebeb;
|
|
77
77
|
--pds-color-input-background-default: #ffffff;
|
|
78
78
|
--pds-color-input-background-hover: #f0ecff;
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
--pds-color-menu-background: #ffffff;
|
|
95
95
|
--pds-color-menu-item-background-active: #cfcfd3;
|
|
96
96
|
--pds-color-menu-item-background-default: #ffffff;
|
|
97
|
-
--pds-color-menu-item-background-hover: #
|
|
97
|
+
--pds-color-menu-item-background-hover: #f8f8f8;
|
|
98
98
|
--pds-color-menu-item-description-text: #71717c;
|
|
99
99
|
--pds-color-menu-item-foreground: #23232d;
|
|
100
100
|
--pds-color-menu-item-heading-text: #71717c;
|
|
@@ -104,8 +104,8 @@
|
|
|
104
104
|
--pds-color-panel-overlay-border: var(--pds-color-border-default);
|
|
105
105
|
--pds-color-panel-raised-background: var(--pds-color-background-default);
|
|
106
106
|
--pds-color-panel-raised-border: var(--pds-color-border-default);
|
|
107
|
-
--pds-color-panel-sunken-background: #
|
|
108
|
-
--pds-color-panel-sunken-border: #
|
|
107
|
+
--pds-color-panel-sunken-background: #f8f8f8;
|
|
108
|
+
--pds-color-panel-sunken-border: #f8f8f8;
|
|
109
109
|
--pds-color-text-default: #23232d;
|
|
110
110
|
--pds-color-text-default-secondary: #71717c;
|
|
111
111
|
--pds-color-text-headings: var(--pds-color-text-default);
|
|
@@ -113,7 +113,8 @@
|
|
|
113
113
|
--pds-color-text-overline: var(--pds-color-text-default-secondary);
|
|
114
114
|
--pds-color-text-paragraph: #23232d;
|
|
115
115
|
--pds-color-text-quote: var(--pds-color-text-default-secondary);
|
|
116
|
-
--pds-color-tile-background-
|
|
116
|
+
--pds-color-tile-background-active: #cfcfd3;
|
|
117
|
+
--pds-color-tile-background-hover: #f8f8f8;
|
|
117
118
|
--pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
|
|
118
119
|
--pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
|
|
119
120
|
}
|
|
@@ -4314,6 +4314,33 @@
|
|
|
4314
4314
|
"background",
|
|
4315
4315
|
"hover"
|
|
4316
4316
|
]
|
|
4317
|
+
},
|
|
4318
|
+
"active": {
|
|
4319
|
+
"value": "#858299",
|
|
4320
|
+
"public": true,
|
|
4321
|
+
"isReferenceToInternal": true,
|
|
4322
|
+
"filePath": "tokens/color/alias/tile.dark.json",
|
|
4323
|
+
"isSource": true,
|
|
4324
|
+
"original": {
|
|
4325
|
+
"value": "{color.dark-mode.neutral.300.value}",
|
|
4326
|
+
"public": true,
|
|
4327
|
+
"isReferenceToInternal": true
|
|
4328
|
+
},
|
|
4329
|
+
"name": "color-dark-mode-tile-background-active",
|
|
4330
|
+
"attributes": {
|
|
4331
|
+
"category": "color",
|
|
4332
|
+
"type": "dark-mode",
|
|
4333
|
+
"item": "tile",
|
|
4334
|
+
"subitem": "background",
|
|
4335
|
+
"state": "active"
|
|
4336
|
+
},
|
|
4337
|
+
"path": [
|
|
4338
|
+
"color",
|
|
4339
|
+
"dark-mode",
|
|
4340
|
+
"tile",
|
|
4341
|
+
"background",
|
|
4342
|
+
"active"
|
|
4343
|
+
]
|
|
4317
4344
|
}
|
|
4318
4345
|
}
|
|
4319
4346
|
},
|
|
@@ -7077,7 +7104,7 @@
|
|
|
7077
7104
|
]
|
|
7078
7105
|
},
|
|
7079
7106
|
"hover": {
|
|
7080
|
-
"value": "#
|
|
7107
|
+
"value": "#f8f8f8",
|
|
7081
7108
|
"public": true,
|
|
7082
7109
|
"isReferenceToInternal": true,
|
|
7083
7110
|
"filePath": "tokens/color/alias/button.light.json",
|
|
@@ -8007,7 +8034,7 @@
|
|
|
8007
8034
|
"action": {
|
|
8008
8035
|
"background": {
|
|
8009
8036
|
"hover": {
|
|
8010
|
-
"value": "#
|
|
8037
|
+
"value": "#f8f8f8",
|
|
8011
8038
|
"public": true,
|
|
8012
8039
|
"isReferenceToInternal": true,
|
|
8013
8040
|
"filePath": "tokens/color/alias/form.light.json",
|
|
@@ -8196,7 +8223,7 @@
|
|
|
8196
8223
|
]
|
|
8197
8224
|
},
|
|
8198
8225
|
"hover": {
|
|
8199
|
-
"value": "#
|
|
8226
|
+
"value": "#f8f8f8",
|
|
8200
8227
|
"public": true,
|
|
8201
8228
|
"isReferenceToInternal": true,
|
|
8202
8229
|
"filePath": "tokens/color/alias/menu.light.json",
|
|
@@ -8390,7 +8417,7 @@
|
|
|
8390
8417
|
},
|
|
8391
8418
|
"sunken": {
|
|
8392
8419
|
"background": {
|
|
8393
|
-
"value": "#
|
|
8420
|
+
"value": "#f8f8f8",
|
|
8394
8421
|
"public": true,
|
|
8395
8422
|
"isReferenceToInternal": true,
|
|
8396
8423
|
"filePath": "tokens/color/alias/panel.light.json",
|
|
@@ -8417,7 +8444,7 @@
|
|
|
8417
8444
|
]
|
|
8418
8445
|
},
|
|
8419
8446
|
"border": {
|
|
8420
|
-
"value": "#
|
|
8447
|
+
"value": "#f8f8f8",
|
|
8421
8448
|
"public": true,
|
|
8422
8449
|
"isReferenceToInternal": true,
|
|
8423
8450
|
"filePath": "tokens/color/alias/panel.light.json",
|
|
@@ -8552,7 +8579,7 @@
|
|
|
8552
8579
|
"tile": {
|
|
8553
8580
|
"background": {
|
|
8554
8581
|
"hover": {
|
|
8555
|
-
"value": "#
|
|
8582
|
+
"value": "#f8f8f8",
|
|
8556
8583
|
"public": true,
|
|
8557
8584
|
"isReferenceToInternal": true,
|
|
8558
8585
|
"filePath": "tokens/color/alias/tile.light.json",
|
|
@@ -8577,6 +8604,33 @@
|
|
|
8577
8604
|
"background",
|
|
8578
8605
|
"hover"
|
|
8579
8606
|
]
|
|
8607
|
+
},
|
|
8608
|
+
"active": {
|
|
8609
|
+
"value": "#cfcfd3",
|
|
8610
|
+
"public": true,
|
|
8611
|
+
"isReferenceToInternal": true,
|
|
8612
|
+
"filePath": "tokens/color/alias/tile.light.json",
|
|
8613
|
+
"isSource": true,
|
|
8614
|
+
"original": {
|
|
8615
|
+
"value": "{color.light-mode.neutral.200.value}",
|
|
8616
|
+
"public": true,
|
|
8617
|
+
"isReferenceToInternal": true
|
|
8618
|
+
},
|
|
8619
|
+
"name": "color-light-mode-tile-background-active",
|
|
8620
|
+
"attributes": {
|
|
8621
|
+
"category": "color",
|
|
8622
|
+
"type": "light-mode",
|
|
8623
|
+
"item": "tile",
|
|
8624
|
+
"subitem": "background",
|
|
8625
|
+
"state": "active"
|
|
8626
|
+
},
|
|
8627
|
+
"path": [
|
|
8628
|
+
"color",
|
|
8629
|
+
"light-mode",
|
|
8630
|
+
"tile",
|
|
8631
|
+
"background",
|
|
8632
|
+
"active"
|
|
8633
|
+
]
|
|
8580
8634
|
}
|
|
8581
8635
|
}
|
|
8582
8636
|
},
|
|
@@ -9558,11 +9612,11 @@
|
|
|
9558
9612
|
},
|
|
9559
9613
|
"neutral": {
|
|
9560
9614
|
"100": {
|
|
9561
|
-
"value": "#
|
|
9615
|
+
"value": "#f8f8f8",
|
|
9562
9616
|
"filePath": "tokens/color/base/neutral.light.json",
|
|
9563
9617
|
"isSource": true,
|
|
9564
9618
|
"original": {
|
|
9565
|
-
"value": "#
|
|
9619
|
+
"value": "#f8f8f8"
|
|
9566
9620
|
},
|
|
9567
9621
|
"name": "color-light-mode-neutral-100",
|
|
9568
9622
|
"attributes": {
|
|
@@ -2515,6 +2515,33 @@
|
|
|
2515
2515
|
"background",
|
|
2516
2516
|
"hover"
|
|
2517
2517
|
]
|
|
2518
|
+
},
|
|
2519
|
+
"active": {
|
|
2520
|
+
"value": "#858299",
|
|
2521
|
+
"public": true,
|
|
2522
|
+
"isReferenceToInternal": true,
|
|
2523
|
+
"filePath": "tokens/color/alias/tile.dark.json",
|
|
2524
|
+
"isSource": true,
|
|
2525
|
+
"original": {
|
|
2526
|
+
"value": "{color.dark-mode.neutral.300.value}",
|
|
2527
|
+
"public": true,
|
|
2528
|
+
"isReferenceToInternal": true
|
|
2529
|
+
},
|
|
2530
|
+
"name": "color-dark-mode-tile-background-active",
|
|
2531
|
+
"attributes": {
|
|
2532
|
+
"category": "color",
|
|
2533
|
+
"type": "dark-mode",
|
|
2534
|
+
"item": "tile",
|
|
2535
|
+
"subitem": "background",
|
|
2536
|
+
"state": "active"
|
|
2537
|
+
},
|
|
2538
|
+
"path": [
|
|
2539
|
+
"color",
|
|
2540
|
+
"dark-mode",
|
|
2541
|
+
"tile",
|
|
2542
|
+
"background",
|
|
2543
|
+
"active"
|
|
2544
|
+
]
|
|
2518
2545
|
}
|
|
2519
2546
|
}
|
|
2520
2547
|
},
|
|
@@ -1009,7 +1009,7 @@
|
|
|
1009
1009
|
]
|
|
1010
1010
|
},
|
|
1011
1011
|
"hover": {
|
|
1012
|
-
"value": "#
|
|
1012
|
+
"value": "#f8f8f8",
|
|
1013
1013
|
"public": true,
|
|
1014
1014
|
"isReferenceToInternal": true,
|
|
1015
1015
|
"filePath": "tokens/color/alias/button.light.json",
|
|
@@ -1939,7 +1939,7 @@
|
|
|
1939
1939
|
"action": {
|
|
1940
1940
|
"background": {
|
|
1941
1941
|
"hover": {
|
|
1942
|
-
"value": "#
|
|
1942
|
+
"value": "#f8f8f8",
|
|
1943
1943
|
"public": true,
|
|
1944
1944
|
"isReferenceToInternal": true,
|
|
1945
1945
|
"filePath": "tokens/color/alias/form.light.json",
|
|
@@ -2128,7 +2128,7 @@
|
|
|
2128
2128
|
]
|
|
2129
2129
|
},
|
|
2130
2130
|
"hover": {
|
|
2131
|
-
"value": "#
|
|
2131
|
+
"value": "#f8f8f8",
|
|
2132
2132
|
"public": true,
|
|
2133
2133
|
"isReferenceToInternal": true,
|
|
2134
2134
|
"filePath": "tokens/color/alias/menu.light.json",
|
|
@@ -2322,7 +2322,7 @@
|
|
|
2322
2322
|
},
|
|
2323
2323
|
"sunken": {
|
|
2324
2324
|
"background": {
|
|
2325
|
-
"value": "#
|
|
2325
|
+
"value": "#f8f8f8",
|
|
2326
2326
|
"public": true,
|
|
2327
2327
|
"isReferenceToInternal": true,
|
|
2328
2328
|
"filePath": "tokens/color/alias/panel.light.json",
|
|
@@ -2349,7 +2349,7 @@
|
|
|
2349
2349
|
]
|
|
2350
2350
|
},
|
|
2351
2351
|
"border": {
|
|
2352
|
-
"value": "#
|
|
2352
|
+
"value": "#f8f8f8",
|
|
2353
2353
|
"public": true,
|
|
2354
2354
|
"isReferenceToInternal": true,
|
|
2355
2355
|
"filePath": "tokens/color/alias/panel.light.json",
|
|
@@ -2484,7 +2484,7 @@
|
|
|
2484
2484
|
"tile": {
|
|
2485
2485
|
"background": {
|
|
2486
2486
|
"hover": {
|
|
2487
|
-
"value": "#
|
|
2487
|
+
"value": "#f8f8f8",
|
|
2488
2488
|
"public": true,
|
|
2489
2489
|
"isReferenceToInternal": true,
|
|
2490
2490
|
"filePath": "tokens/color/alias/tile.light.json",
|
|
@@ -2509,6 +2509,33 @@
|
|
|
2509
2509
|
"background",
|
|
2510
2510
|
"hover"
|
|
2511
2511
|
]
|
|
2512
|
+
},
|
|
2513
|
+
"active": {
|
|
2514
|
+
"value": "#cfcfd3",
|
|
2515
|
+
"public": true,
|
|
2516
|
+
"isReferenceToInternal": true,
|
|
2517
|
+
"filePath": "tokens/color/alias/tile.light.json",
|
|
2518
|
+
"isSource": true,
|
|
2519
|
+
"original": {
|
|
2520
|
+
"value": "{color.light-mode.neutral.200.value}",
|
|
2521
|
+
"public": true,
|
|
2522
|
+
"isReferenceToInternal": true
|
|
2523
|
+
},
|
|
2524
|
+
"name": "color-light-mode-tile-background-active",
|
|
2525
|
+
"attributes": {
|
|
2526
|
+
"category": "color",
|
|
2527
|
+
"type": "light-mode",
|
|
2528
|
+
"item": "tile",
|
|
2529
|
+
"subitem": "background",
|
|
2530
|
+
"state": "active"
|
|
2531
|
+
},
|
|
2532
|
+
"path": [
|
|
2533
|
+
"color",
|
|
2534
|
+
"light-mode",
|
|
2535
|
+
"tile",
|
|
2536
|
+
"background",
|
|
2537
|
+
"active"
|
|
2538
|
+
]
|
|
2512
2539
|
}
|
|
2513
2540
|
}
|
|
2514
2541
|
},
|
|
@@ -3490,11 +3517,11 @@
|
|
|
3490
3517
|
},
|
|
3491
3518
|
"neutral": {
|
|
3492
3519
|
"100": {
|
|
3493
|
-
"value": "#
|
|
3520
|
+
"value": "#f8f8f8",
|
|
3494
3521
|
"filePath": "tokens/color/base/neutral.light.json",
|
|
3495
3522
|
"isSource": true,
|
|
3496
3523
|
"original": {
|
|
3497
|
-
"value": "#
|
|
3524
|
+
"value": "#f8f8f8"
|
|
3498
3525
|
},
|
|
3499
3526
|
"name": "color-light-mode-neutral-100",
|
|
3500
3527
|
"attributes": {
|
|
@@ -111,6 +111,7 @@ $pds-color-text-lead: $pds-color-text-default-secondary;
|
|
|
111
111
|
$pds-color-text-overline: $pds-color-text-default-secondary;
|
|
112
112
|
$pds-color-text-paragraph: $pds-color-text-default;
|
|
113
113
|
$pds-color-text-quote: $pds-color-text-default-secondary;
|
|
114
|
+
$pds-color-tile-background-active: #858299;
|
|
114
115
|
$pds-color-tile-background-hover: #504e62;
|
|
115
116
|
$pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
|
|
116
117
|
$pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
|
|
@@ -24,7 +24,7 @@ $pds-color-button-brand-foreground-default: #23232d;
|
|
|
24
24
|
$pds-color-button-brand-foreground-hover: #23232d;
|
|
25
25
|
$pds-color-button-brand-secondary-background-active: #cfcfd3;
|
|
26
26
|
$pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
|
|
27
|
-
$pds-color-button-brand-secondary-background-hover: #
|
|
27
|
+
$pds-color-button-brand-secondary-background-hover: #f8f8f8;
|
|
28
28
|
$pds-color-button-brand-secondary-border-active: #23232d;
|
|
29
29
|
$pds-color-button-brand-secondary-border-default: #71717c;
|
|
30
30
|
$pds-color-button-brand-secondary-border-hover: #23232d;
|
|
@@ -70,7 +70,7 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
|
|
|
70
70
|
$pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
|
|
71
71
|
$pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
|
|
72
72
|
$pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
|
|
73
|
-
$pds-color-input-action-background-hover: #
|
|
73
|
+
$pds-color-input-action-background-hover: #f8f8f8;
|
|
74
74
|
$pds-color-input-background-critical: #ffebeb;
|
|
75
75
|
$pds-color-input-background-default: #ffffff;
|
|
76
76
|
$pds-color-input-background-hover: #f0ecff;
|
|
@@ -92,7 +92,7 @@ $pds-color-link-visited: #6f54e8;
|
|
|
92
92
|
$pds-color-menu-background: #ffffff;
|
|
93
93
|
$pds-color-menu-item-background-active: #cfcfd3;
|
|
94
94
|
$pds-color-menu-item-background-default: #ffffff;
|
|
95
|
-
$pds-color-menu-item-background-hover: #
|
|
95
|
+
$pds-color-menu-item-background-hover: #f8f8f8;
|
|
96
96
|
$pds-color-menu-item-description-text: #71717c;
|
|
97
97
|
$pds-color-menu-item-foreground: #23232d;
|
|
98
98
|
$pds-color-menu-item-heading-text: #71717c;
|
|
@@ -102,8 +102,8 @@ $pds-color-panel-overlay-background: $pds-color-background-default;
|
|
|
102
102
|
$pds-color-panel-overlay-border: $pds-color-border-default;
|
|
103
103
|
$pds-color-panel-raised-background: $pds-color-background-default;
|
|
104
104
|
$pds-color-panel-raised-border: $pds-color-border-default;
|
|
105
|
-
$pds-color-panel-sunken-background: #
|
|
106
|
-
$pds-color-panel-sunken-border: #
|
|
105
|
+
$pds-color-panel-sunken-background: #f8f8f8;
|
|
106
|
+
$pds-color-panel-sunken-border: #f8f8f8;
|
|
107
107
|
$pds-color-text-default: #23232d;
|
|
108
108
|
$pds-color-text-default-secondary: #71717c;
|
|
109
109
|
$pds-color-text-headings: $pds-color-text-default;
|
|
@@ -111,6 +111,7 @@ $pds-color-text-lead: $pds-color-text-default-secondary;
|
|
|
111
111
|
$pds-color-text-overline: $pds-color-text-default-secondary;
|
|
112
112
|
$pds-color-text-paragraph: #23232d;
|
|
113
113
|
$pds-color-text-quote: $pds-color-text-default-secondary;
|
|
114
|
-
$pds-color-tile-background-
|
|
114
|
+
$pds-color-tile-background-active: #cfcfd3;
|
|
115
|
+
$pds-color-tile-background-hover: #f8f8f8;
|
|
115
116
|
$pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
|
|
116
117
|
$pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
|