@pantheon-systems/pds-design-tokens 2.0.0-alpha.60 → 2.0.0-alpha.61
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.
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
--pds-color-card-background: oklch(0.2178 0 0);
|
|
77
77
|
--pds-color-code-block-background: oklch(0.2931 0 0);
|
|
78
78
|
--pds-color-code-block-foreground: oklch(1 0 0);
|
|
79
|
+
--pds-color-code-block-focus: oklch(0.6382 0.1612 253.57);
|
|
79
80
|
--pds-color-code-block-line-prefix: #9699a1;
|
|
80
81
|
--pds-color-code-block-syntax-punctuation: #c3c5c9;
|
|
81
82
|
--pds-color-code-block-syntax-function: #f5c43a;
|
|
@@ -86,7 +87,7 @@
|
|
|
86
87
|
--pds-color-code-block-syntax-deleted: #f8495d;
|
|
87
88
|
--pds-color-code-block-syntax-inserted: #a0f76e;
|
|
88
89
|
--pds-color-datepicker-accent-foreground: oklch(0.8369 0.0765 253.48);
|
|
89
|
-
--pds-color-datepicker-selected-background:
|
|
90
|
+
--pds-color-datepicker-selected-background: var(--pds-color-interactive-background-current);
|
|
90
91
|
--pds-color-datepicker-selected-foreground: oklch(0.2178 0 0);
|
|
91
92
|
--pds-color-pagination-foreground-hover: oklch(1 0 0);
|
|
92
93
|
--pds-color-pagination-foreground-active: oklch(0.9702 0 0);
|
|
@@ -203,7 +204,7 @@
|
|
|
203
204
|
--pds-color-button-brand-background-hover: oklch(0.7640 0.1510 84.30);
|
|
204
205
|
--pds-color-button-brand-background-active: oklch(0.6723 0.1329 84.30);
|
|
205
206
|
--pds-color-button-brand-foreground: oklch(0.2178 0 0);
|
|
206
|
-
--pds-color-button-highlight-background-default:
|
|
207
|
+
--pds-color-button-highlight-background-default: var(--pds-color-interactive-background-current);
|
|
207
208
|
--pds-color-button-highlight-background-hover: oklch(0.7452 0.1208 253.44);
|
|
208
209
|
--pds-color-button-highlight-background-active: oklch(0.8369 0.0765 253.48);
|
|
209
210
|
--pds-color-button-highlight-foreground: oklch(0.2178 0 0);
|
|
@@ -341,12 +342,12 @@
|
|
|
341
342
|
--pds-color-interactive-background-active: oklch(0.2931 0 0);
|
|
342
343
|
--pds-color-interactive-background-selected: oklch(0.2940 0.1030 256.67);
|
|
343
344
|
--pds-color-interactive-background-selected-foreground: oklch(0.9702 0 0);
|
|
344
|
-
--pds-color-interactive-reverse-focus: oklch(0.
|
|
345
|
-
--pds-color-interactive-reverse-link-default: oklch(0.
|
|
345
|
+
--pds-color-interactive-reverse-focus: oklch(0.58 0.1689 253.60);
|
|
346
|
+
--pds-color-interactive-reverse-link-default: oklch(0.5 0.155 254);
|
|
346
347
|
--pds-color-interactive-reverse-link-hover: oklch(0.6015 0.1484 35.70);
|
|
347
348
|
--pds-color-interactive-reverse-link-active: oklch(0.5093 0.1241 35.58);
|
|
348
|
-
--pds-color-interactive-reverse-link-visited: oklch(0.
|
|
349
|
-
--pds-color-interactive-reverse-foreground-hover: oklch(0.
|
|
349
|
+
--pds-color-interactive-reverse-link-visited: oklch(0.5 0.155 254);
|
|
350
|
+
--pds-color-interactive-reverse-foreground-hover: oklch(0.5 0.155 254);
|
|
350
351
|
--pds-color-nav-item-reverse-foreground-hover: oklch(0.5198 0.1353 302.93);
|
|
351
352
|
--pds-color-nav-item-reverse-foreground-active: oklch(0.5198 0.1353 302.93);
|
|
352
353
|
--pds-color-overlay: rgba(0, 0, 0, 0.45);
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
--pds-animation-timing-function-default: cubic-bezier(.2, 0, 0, 1);
|
|
5
5
|
--pds-animation-transition-button: background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
|
|
6
6
|
--pds-animation-transition-default: all 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
|
|
7
|
-
--pds-animation-transition-focus: outline
|
|
8
|
-
--pds-animation-transition-input: border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms
|
|
7
|
+
--pds-animation-transition-focus: outline-offset 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
|
|
8
|
+
--pds-animation-transition-input: border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
|
|
9
9
|
--pds-animation-transition-link: color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
|
|
10
10
|
--pds-animation-transition-reveal: height 300ms cubic-bezier(.2, 0, 0, 1) 0ms, opacity 300ms cubic-bezier(.2, 0, 0, 1) 0ms, padding 300ms cubic-bezier(.2, 0, 0, 1) 0ms, width 300ms cubic-bezier(.2, 0, 0, 1) 0ms;
|
|
11
11
|
--pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--pds-color-badge-critical-foreground: oklch(1.0000 0 0);
|
|
16
16
|
--pds-color-badge-critical-muted-background: oklch(0.8859 0.0414 19.05);
|
|
17
17
|
--pds-color-badge-critical-muted-foreground: oklch(0.2550 0.0814 25.05);
|
|
18
|
-
--pds-color-badge-info-background: oklch(0.
|
|
18
|
+
--pds-color-badge-info-background: oklch(0.5 0.155 254);
|
|
19
19
|
--pds-color-badge-info-foreground: oklch(1.0000 0 0);
|
|
20
20
|
--pds-color-badge-info-muted-background: oklch(0.9124 0.0439 250.42);
|
|
21
21
|
--pds-color-badge-info-muted-foreground: oklch(0.2940 0.1030 256.67);
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
--pds-color-badge-gold-foreground: oklch(1.0000 0 0);
|
|
64
64
|
--pds-color-badge-gold-muted-background: oklch(0.9281 0.0348 98.08);
|
|
65
65
|
--pds-color-badge-gold-muted-foreground: oklch(0.2816 0.0657 60.48);
|
|
66
|
-
--pds-color-banner-info-background: oklch(0.
|
|
66
|
+
--pds-color-banner-info-background: oklch(0.5 0.155 254);
|
|
67
67
|
--pds-color-banner-info-foreground: oklch(1.0000 0 0);
|
|
68
68
|
--pds-color-banner-warning-background: oklch(0.5658 0.1338 53.43);
|
|
69
69
|
--pds-color-banner-warning-foreground: oklch(1.0000 0 0);
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
--pds-color-card-background: oklch(1.0000 0 0);
|
|
77
77
|
--pds-color-code-block-background: oklch(0.31 0 0);
|
|
78
78
|
--pds-color-code-block-foreground: oklch(1 0 0);
|
|
79
|
+
--pds-color-code-block-focus: oklch(0.6382 0.1612 253.57);
|
|
79
80
|
--pds-color-code-block-line-prefix: #9699a1;
|
|
80
81
|
--pds-color-code-block-syntax-punctuation: #c3c5c9;
|
|
81
82
|
--pds-color-code-block-syntax-function: #f5c43a;
|
|
@@ -85,18 +86,18 @@
|
|
|
85
86
|
--pds-color-code-block-syntax-tag: #ff61ca;
|
|
86
87
|
--pds-color-code-block-syntax-deleted: #f8495d;
|
|
87
88
|
--pds-color-code-block-syntax-inserted: #a0f76e;
|
|
88
|
-
--pds-color-datepicker-accent-foreground: oklch(0.
|
|
89
|
-
--pds-color-datepicker-selected-background:
|
|
89
|
+
--pds-color-datepicker-accent-foreground: oklch(0.59 0.1689 253.60);
|
|
90
|
+
--pds-color-datepicker-selected-background: var(--pds-color-interactive-background-current);
|
|
90
91
|
--pds-color-datepicker-selected-foreground: oklch(1.0000 0 0);
|
|
91
92
|
--pds-color-pagination-foreground-hover: oklch(0.2178 0 0);
|
|
92
93
|
--pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
|
|
93
94
|
--pds-color-pagination-foreground-current: var(--pds-color-interactive-background-current-foreground);
|
|
94
|
-
--pds-color-pagination-background-hover: oklch(0.
|
|
95
|
-
--pds-color-pagination-background-active: oklch(0.
|
|
96
|
-
--pds-color-pagination-background-current: oklch(0.
|
|
97
|
-
--pds-color-panel-sunken-background: oklch(0.
|
|
98
|
-
--pds-color-expansion-panel-hover: oklch(0.
|
|
99
|
-
--pds-color-expansion-panel-open: oklch(0.
|
|
95
|
+
--pds-color-pagination-background-hover: oklch(0.9731 0 0);
|
|
96
|
+
--pds-color-pagination-background-active: oklch(0.9124 0.0439 250.42);
|
|
97
|
+
--pds-color-pagination-background-current: oklch(0.5 0.155 254);
|
|
98
|
+
--pds-color-panel-sunken-background: oklch(0.9731 0 0);
|
|
99
|
+
--pds-color-expansion-panel-hover: oklch(0.9731 0 0);
|
|
100
|
+
--pds-color-expansion-panel-open: oklch(0.9731 0 0);
|
|
100
101
|
--pds-color-popover-border: oklch(0.9430 0 0);
|
|
101
102
|
--pds-color-skeleton-regular-base: oklch(0.8761 0 0);
|
|
102
103
|
--pds-color-skeleton-regular-shimmer: oklch(0.9430 0 0);
|
|
@@ -162,7 +163,7 @@
|
|
|
162
163
|
--pds-color-tag-warning-solid-foreground: oklch(1.0000 0 0);
|
|
163
164
|
--pds-color-tag-critical-solid-background: oklch(0.4501 0.1581 26.35);
|
|
164
165
|
--pds-color-tag-critical-solid-foreground: oklch(1.0000 0 0);
|
|
165
|
-
--pds-color-tag-info-solid-background: oklch(0.
|
|
166
|
+
--pds-color-tag-info-solid-background: oklch(0.5 0.155 254);
|
|
166
167
|
--pds-color-tag-info-solid-foreground: oklch(1.0000 0 0);
|
|
167
168
|
--pds-color-tag-discovery-solid-background: oklch(0.4274 0.1232 303.80);
|
|
168
169
|
--pds-color-tag-discovery-solid-foreground: oklch(1.0000 0 0);
|
|
@@ -172,13 +173,13 @@
|
|
|
172
173
|
--pds-color-tally-warning-foreground: oklch(1.0000 0 0);
|
|
173
174
|
--pds-color-tally-critical-background: oklch(0.4501 0.1581 26.35);
|
|
174
175
|
--pds-color-tally-critical-foreground: oklch(1.0000 0 0);
|
|
175
|
-
--pds-color-tally-info-background: oklch(0.
|
|
176
|
+
--pds-color-tally-info-background: oklch(0.5 0.155 254);
|
|
176
177
|
--pds-color-tally-info-foreground: oklch(1.0000 0 0);
|
|
177
178
|
--pds-color-tally-discovery-background: oklch(0.4274 0.1232 303.80);
|
|
178
179
|
--pds-color-tally-discovery-foreground: oklch(1.0000 0 0);
|
|
179
180
|
--pds-color-brand-default: oklch(0.8622 0.1681 88.31);
|
|
180
181
|
--pds-color-surface-default: oklch(1.0000 0 0);
|
|
181
|
-
--pds-color-surface-default-secondary: oklch(0.
|
|
182
|
+
--pds-color-surface-default-secondary: oklch(0.9731 0 0);
|
|
182
183
|
--pds-color-surface-reverse: oklch(0.2178 0 0);
|
|
183
184
|
--pds-color-border-default: oklch(0.9430 0 0);
|
|
184
185
|
--pds-color-border-default-secondary: oklch(0.8761 0 0);
|
|
@@ -191,21 +192,21 @@
|
|
|
191
192
|
--pds-color-button-primary-foreground: var(--pds-color-foreground-reverse);
|
|
192
193
|
--pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
|
|
193
194
|
--pds-color-button-secondary-background-hover: rgba(0, 0, 0, 0.06);
|
|
194
|
-
--pds-color-button-secondary-background-active: oklch(0.
|
|
195
|
+
--pds-color-button-secondary-background-active: oklch(0.9731 0 0);
|
|
195
196
|
--pds-color-button-secondary-border: oklch(0.8047 0 0);
|
|
196
197
|
--pds-color-button-secondary-foreground-default: oklch(0.2178 0 0);
|
|
197
198
|
--pds-color-button-secondary-foreground-hover: oklch(0.2178 0 0);
|
|
198
199
|
--pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
|
|
199
200
|
--pds-color-button-subtle-background-hover: rgba(0, 0, 0, 0.06);
|
|
200
|
-
--pds-color-button-subtle-background-active: oklch(0.
|
|
201
|
+
--pds-color-button-subtle-background-active: oklch(0.9731 0 0);
|
|
201
202
|
--pds-color-button-subtle-foreground: oklch(0.2178 0 0);
|
|
202
203
|
--pds-color-button-brand-background-default: oklch(0.8622 0.1681 88.31);
|
|
203
204
|
--pds-color-button-brand-background-hover: oklch(0.8018 0.1553 87.86);
|
|
204
205
|
--pds-color-button-brand-background-active: oklch(0.7457 0.1444 87.86);
|
|
205
206
|
--pds-color-button-brand-foreground: oklch(0.2178 0 0);
|
|
206
|
-
--pds-color-button-highlight-background-default:
|
|
207
|
-
--pds-color-button-highlight-background-hover: oklch(0.
|
|
208
|
-
--pds-color-button-highlight-background-active: oklch(0.
|
|
207
|
+
--pds-color-button-highlight-background-default: var(--pds-color-interactive-background-current);
|
|
208
|
+
--pds-color-button-highlight-background-hover: oklch(0.455 0.155 254);
|
|
209
|
+
--pds-color-button-highlight-background-active: oklch(0.44 0.1280 255.90);
|
|
209
210
|
--pds-color-button-highlight-foreground: var(--pds-color-foreground-reverse);
|
|
210
211
|
--pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
|
|
211
212
|
--pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
|
|
@@ -246,14 +247,14 @@
|
|
|
246
247
|
--pds-color-icon-button-reverse-foreground: oklch(0.9430 0 0);
|
|
247
248
|
--pds-color-split-button-primary-separator: oklch(1.0000 0 0);
|
|
248
249
|
--pds-color-split-button-secondary-separator: oklch(0.8761 0 0);
|
|
249
|
-
--pds-color-segmented-button-background-inactive: oklch(0.
|
|
250
|
-
--pds-color-segmented-button-background-active: oklch(0.
|
|
250
|
+
--pds-color-segmented-button-background-inactive: oklch(0.9731 0 0);
|
|
251
|
+
--pds-color-segmented-button-background-active: oklch(0.5 0.155 254);
|
|
251
252
|
--pds-color-segmented-button-foreground-inactive: var(--pds-color-foreground-default-secondary);
|
|
252
253
|
--pds-color-segmented-button-foreground-active: var(--pds-color-foreground-reverse);
|
|
253
254
|
--pds-color-category-ai-foreground: oklch(0.5198 0.1353 302.93);
|
|
254
255
|
--pds-color-category-ai-utility: oklch(0.6782 0.1118 309.11);
|
|
255
256
|
--pds-color-category-ai-background: oklch(0.9561 0.0155 306.41);
|
|
256
|
-
--pds-color-code-inline-background: oklch(0.
|
|
257
|
+
--pds-color-code-inline-background: oklch(0.9731 0 0);
|
|
257
258
|
--pds-color-code-inline-border: oklch(0.9430 0 0);
|
|
258
259
|
--pds-color-code-inline-text: oklch(0.2178 0 0);
|
|
259
260
|
--pds-color-datavis-categorical-1: #006dcc;
|
|
@@ -313,9 +314,9 @@
|
|
|
313
314
|
--pds-color-highlight-background: oklch(0.9 0.13 72);
|
|
314
315
|
--pds-color-highlight-foreground: oklch(0.2178 0 0);
|
|
315
316
|
--pds-color-input-placeholder: oklch(0.8047 0 0);
|
|
316
|
-
--pds-color-input-file-upload-button-background-default: oklch(0.
|
|
317
|
+
--pds-color-input-file-upload-button-background-default: oklch(0.9731 0 0);
|
|
317
318
|
--pds-color-input-file-upload-button-background-hover: oklch(0.9430 0 0);
|
|
318
|
-
--pds-color-input-selected-background: oklch(0.
|
|
319
|
+
--pds-color-input-selected-background: oklch(0.59 0.1689 253.60);
|
|
319
320
|
--pds-color-input-selected-foreground: oklch(1.0000 0 0);
|
|
320
321
|
--pds-color-input-switch-icon: oklch(1.0000 0 0);
|
|
321
322
|
--pds-color-input-switch-background: oklch(0.4778 0.0020 247.87);
|
|
@@ -324,29 +325,29 @@
|
|
|
324
325
|
--pds-color-input-tag-background-active: oklch(0.9561 0.0155 306.41);
|
|
325
326
|
--pds-color-input-tag-foreground-default: oklch(0.2178 0 0);
|
|
326
327
|
--pds-color-input-tag-foreground-hover: oklch(0.2178 0 0);
|
|
327
|
-
--pds-color-input-tag-foreground-active: oklch(0.
|
|
328
|
-
--pds-color-input-tag-outline-active: oklch(0.
|
|
329
|
-
--pds-color-interactive-focus: oklch(0.
|
|
330
|
-
--pds-color-interactive-link-default: oklch(0.
|
|
328
|
+
--pds-color-input-tag-foreground-active: oklch(0.59 0.1689 253.60);
|
|
329
|
+
--pds-color-input-tag-outline-active: oklch(0.59 0.1689 253.60);
|
|
330
|
+
--pds-color-interactive-focus: oklch(0.59 0.1689 253.60);
|
|
331
|
+
--pds-color-interactive-link-default: oklch(0.5 0.155 254);
|
|
331
332
|
--pds-color-interactive-link-hover: oklch(0.6015 0.1484 35.70);
|
|
332
333
|
--pds-color-interactive-link-active: oklch(0.5093 0.1241 35.58);
|
|
333
|
-
--pds-color-interactive-link-visited: oklch(0.
|
|
334
|
-
--pds-color-interactive-foreground-current: oklch(0.
|
|
335
|
-
--pds-color-interactive-foreground-hover: oklch(0.
|
|
336
|
-
--pds-color-interactive-foreground-active: oklch(0.
|
|
334
|
+
--pds-color-interactive-link-visited: oklch(0.5 0.155 254);
|
|
335
|
+
--pds-color-interactive-foreground-current: oklch(0.59 0.1689 253.60);
|
|
336
|
+
--pds-color-interactive-foreground-hover: oklch(0.5 0.155 254);
|
|
337
|
+
--pds-color-interactive-foreground-active: oklch(0.5 0.155 254);
|
|
337
338
|
--pds-color-interactive-foreground-inactive: oklch(0.8047 0 0);
|
|
338
|
-
--pds-color-interactive-background-current: oklch(0.
|
|
339
|
+
--pds-color-interactive-background-current: oklch(0.5 0.155 254);
|
|
339
340
|
--pds-color-interactive-background-current-foreground: oklch(1.0000 0 0);
|
|
340
|
-
--pds-color-interactive-background-hover: oklch(0.
|
|
341
|
+
--pds-color-interactive-background-hover: oklch(0.9731 0 0);
|
|
341
342
|
--pds-color-interactive-background-active: oklch(0.9430 0 0);
|
|
342
|
-
--pds-color-interactive-background-selected: oklch(0.
|
|
343
|
+
--pds-color-interactive-background-selected: oklch(0.9124 0.0439 250.42);
|
|
343
344
|
--pds-color-interactive-background-selected-foreground: oklch(0.2178 0 0);
|
|
344
|
-
--pds-color-interactive-reverse-focus: oklch(0.
|
|
345
|
-
--pds-color-interactive-reverse-link-default: oklch(0.
|
|
345
|
+
--pds-color-interactive-reverse-focus: oklch(0.6382 0.1612 253.57);
|
|
346
|
+
--pds-color-interactive-reverse-link-default: oklch(0.6382 0.1612 253.57);
|
|
346
347
|
--pds-color-interactive-reverse-link-hover: oklch(0.6707 0.1296 32.99);
|
|
347
348
|
--pds-color-interactive-reverse-link-active: oklch(0.7480 0.1030 37.44);
|
|
348
|
-
--pds-color-interactive-reverse-link-visited: oklch(0.
|
|
349
|
-
--pds-color-interactive-reverse-foreground-hover: oklch(0.
|
|
349
|
+
--pds-color-interactive-reverse-link-visited: oklch(0.6382 0.1612 253.57);
|
|
350
|
+
--pds-color-interactive-reverse-foreground-hover: oklch(0.8369 0.0765 253.48);
|
|
350
351
|
--pds-color-nav-item-reverse-foreground-hover: oklch(0.8275 0.0578 308.23);
|
|
351
352
|
--pds-color-nav-item-reverse-foreground-active: oklch(0.8275 0.0578 308.23);
|
|
352
353
|
--pds-color-overlay: rgba(0, 0, 0, 0.45);
|
|
@@ -379,9 +380,9 @@
|
|
|
379
380
|
--pds-color-status-critical-border: oklch(0.5338 0.1771 25.54);
|
|
380
381
|
--pds-color-status-critical-background: oklch(0.9629 0.0152 22.40);
|
|
381
382
|
--pds-color-status-critical-background-hover: oklch(0.8859 0.0414 19.05);
|
|
382
|
-
--pds-color-status-info-foreground: oklch(0.
|
|
383
|
-
--pds-color-status-info-fill: oklch(0.
|
|
384
|
-
--pds-color-status-info-border: oklch(0.
|
|
383
|
+
--pds-color-status-info-foreground: oklch(0.5 0.155 254);
|
|
384
|
+
--pds-color-status-info-fill: oklch(0.59 0.1689 253.60);
|
|
385
|
+
--pds-color-status-info-border: oklch(0.59 0.1689 253.60);
|
|
385
386
|
--pds-color-status-info-background: oklch(0.9587 0.0206 248.04);
|
|
386
387
|
--pds-color-status-info-background-hover: oklch(0.9124 0.0439 250.42);
|
|
387
388
|
--pds-color-status-discovery-foreground: oklch(0.4274 0.1232 303.80);
|
package/build/figma/tokens.json
CHANGED
|
@@ -1823,7 +1823,7 @@
|
|
|
1823
1823
|
}
|
|
1824
1824
|
},
|
|
1825
1825
|
"200": {
|
|
1826
|
-
"value": "#
|
|
1826
|
+
"value": "#f6f6f6",
|
|
1827
1827
|
"type": "color",
|
|
1828
1828
|
"$extensions": {
|
|
1829
1829
|
"com.figma": {
|
|
@@ -2191,7 +2191,7 @@
|
|
|
2191
2191
|
}
|
|
2192
2192
|
},
|
|
2193
2193
|
"600": {
|
|
2194
|
-
"value": "#
|
|
2194
|
+
"value": "#207dde",
|
|
2195
2195
|
"type": "color",
|
|
2196
2196
|
"$extensions": {
|
|
2197
2197
|
"com.figma": {
|
|
@@ -2200,7 +2200,7 @@
|
|
|
2200
2200
|
}
|
|
2201
2201
|
},
|
|
2202
2202
|
"700": {
|
|
2203
|
-
"value": "#
|
|
2203
|
+
"value": "#0862b8",
|
|
2204
2204
|
"type": "color",
|
|
2205
2205
|
"$extensions": {
|
|
2206
2206
|
"com.figma": {
|
|
@@ -2209,7 +2209,7 @@
|
|
|
2209
2209
|
}
|
|
2210
2210
|
},
|
|
2211
2211
|
"800": {
|
|
2212
|
-
"value": "#
|
|
2212
|
+
"value": "#185197",
|
|
2213
2213
|
"type": "color",
|
|
2214
2214
|
"$extensions": {
|
|
2215
2215
|
"com.figma": {
|
|
@@ -2828,11 +2828,10 @@
|
|
|
2828
2828
|
"highlight": {
|
|
2829
2829
|
"background": {
|
|
2830
2830
|
"default": {
|
|
2831
|
-
"value": "{color.light-mode.
|
|
2831
|
+
"value": "{color.light-mode.interactive.background.current}",
|
|
2832
2832
|
"type": "color",
|
|
2833
2833
|
"$extensions": {
|
|
2834
2834
|
"public": true,
|
|
2835
|
-
"resolveValue": true,
|
|
2836
2835
|
"com.figma": {
|
|
2837
2836
|
"exportAs": "variable",
|
|
2838
2837
|
"codeSyntax": {
|
|
@@ -2842,11 +2841,10 @@
|
|
|
2842
2841
|
}
|
|
2843
2842
|
},
|
|
2844
2843
|
"hover": {
|
|
2845
|
-
"value": "
|
|
2844
|
+
"value": "#0055a9",
|
|
2846
2845
|
"type": "color",
|
|
2847
2846
|
"$extensions": {
|
|
2848
2847
|
"public": true,
|
|
2849
|
-
"resolveValue": true,
|
|
2850
2848
|
"com.figma": {
|
|
2851
2849
|
"exportAs": "variable",
|
|
2852
2850
|
"codeSyntax": {
|
|
@@ -4622,7 +4620,7 @@
|
|
|
4622
4620
|
},
|
|
4623
4621
|
"link": {
|
|
4624
4622
|
"default": {
|
|
4625
|
-
"value": "{color.light-mode.info.
|
|
4623
|
+
"value": "{color.light-mode.info.700}",
|
|
4626
4624
|
"type": "color",
|
|
4627
4625
|
"$extensions": {
|
|
4628
4626
|
"public": true,
|
|
@@ -4662,7 +4660,7 @@
|
|
|
4662
4660
|
}
|
|
4663
4661
|
},
|
|
4664
4662
|
"visited": {
|
|
4665
|
-
"value": "{color.light-mode.info.
|
|
4663
|
+
"value": "{color.light-mode.info.700}",
|
|
4666
4664
|
"type": "color",
|
|
4667
4665
|
"$extensions": {
|
|
4668
4666
|
"public": true,
|
|
@@ -4692,7 +4690,7 @@
|
|
|
4692
4690
|
}
|
|
4693
4691
|
},
|
|
4694
4692
|
"hover": {
|
|
4695
|
-
"value": "{color.light-mode.info.
|
|
4693
|
+
"value": "{color.light-mode.info.700}",
|
|
4696
4694
|
"type": "color",
|
|
4697
4695
|
"$extensions": {
|
|
4698
4696
|
"public": true,
|
|
@@ -4706,7 +4704,7 @@
|
|
|
4706
4704
|
}
|
|
4707
4705
|
},
|
|
4708
4706
|
"active": {
|
|
4709
|
-
"value": "{color.light-mode.info.
|
|
4707
|
+
"value": "{color.light-mode.info.700}",
|
|
4710
4708
|
"type": "color",
|
|
4711
4709
|
"$extensions": {
|
|
4712
4710
|
"public": true,
|
|
@@ -4735,7 +4733,7 @@
|
|
|
4735
4733
|
},
|
|
4736
4734
|
"background": {
|
|
4737
4735
|
"current": {
|
|
4738
|
-
"value": "{color.light-mode.info.
|
|
4736
|
+
"value": "{color.light-mode.info.700}",
|
|
4739
4737
|
"type": "color",
|
|
4740
4738
|
"$extensions": {
|
|
4741
4739
|
"public": true,
|
|
@@ -4790,7 +4788,7 @@
|
|
|
4790
4788
|
}
|
|
4791
4789
|
},
|
|
4792
4790
|
"selected": {
|
|
4793
|
-
"value": "{color.light-mode.info.
|
|
4791
|
+
"value": "{color.light-mode.info.200}",
|
|
4794
4792
|
"type": "color",
|
|
4795
4793
|
"$extensions": {
|
|
4796
4794
|
"public": true,
|
|
@@ -4820,10 +4818,11 @@
|
|
|
4820
4818
|
},
|
|
4821
4819
|
"reverse": {
|
|
4822
4820
|
"focus": {
|
|
4823
|
-
"value": "
|
|
4821
|
+
"value": "{color.light-mode.info.500}",
|
|
4824
4822
|
"type": "color",
|
|
4825
4823
|
"$extensions": {
|
|
4826
4824
|
"public": true,
|
|
4825
|
+
"resolveValue": true,
|
|
4827
4826
|
"com.figma": {
|
|
4828
4827
|
"exportAs": "variable",
|
|
4829
4828
|
"codeSyntax": {
|
|
@@ -4834,10 +4833,11 @@
|
|
|
4834
4833
|
},
|
|
4835
4834
|
"link": {
|
|
4836
4835
|
"default": {
|
|
4837
|
-
"value": "
|
|
4836
|
+
"value": "{color.light-mode.info.500}",
|
|
4838
4837
|
"type": "color",
|
|
4839
4838
|
"$extensions": {
|
|
4840
4839
|
"public": true,
|
|
4840
|
+
"resolveValue": true,
|
|
4841
4841
|
"com.figma": {
|
|
4842
4842
|
"exportAs": "variable",
|
|
4843
4843
|
"codeSyntax": {
|
|
@@ -4873,10 +4873,11 @@
|
|
|
4873
4873
|
}
|
|
4874
4874
|
},
|
|
4875
4875
|
"visited": {
|
|
4876
|
-
"value": "
|
|
4876
|
+
"value": "{color.light-mode.info.500}",
|
|
4877
4877
|
"type": "color",
|
|
4878
4878
|
"$extensions": {
|
|
4879
4879
|
"public": true,
|
|
4880
|
+
"resolveValue": true,
|
|
4880
4881
|
"com.figma": {
|
|
4881
4882
|
"exportAs": "variable",
|
|
4882
4883
|
"codeSyntax": {
|
|
@@ -4888,10 +4889,11 @@
|
|
|
4888
4889
|
},
|
|
4889
4890
|
"foreground": {
|
|
4890
4891
|
"hover": {
|
|
4891
|
-
"value": "
|
|
4892
|
+
"value": "{color.light-mode.info.300}",
|
|
4892
4893
|
"type": "color",
|
|
4893
4894
|
"$extensions": {
|
|
4894
4895
|
"public": true,
|
|
4896
|
+
"resolveValue": true,
|
|
4895
4897
|
"com.figma": {
|
|
4896
4898
|
"exportAs": "variable",
|
|
4897
4899
|
"codeSyntax": {
|
|
@@ -6732,6 +6734,20 @@
|
|
|
6732
6734
|
}
|
|
6733
6735
|
}
|
|
6734
6736
|
},
|
|
6737
|
+
"focus": {
|
|
6738
|
+
"value": "{color.light-mode.info.500}",
|
|
6739
|
+
"type": "color",
|
|
6740
|
+
"$extensions": {
|
|
6741
|
+
"public": true,
|
|
6742
|
+
"resolveValue": true,
|
|
6743
|
+
"com.figma": {
|
|
6744
|
+
"exportAs": "variable",
|
|
6745
|
+
"codeSyntax": {
|
|
6746
|
+
"WEB": "--pds-color-code-block-focus"
|
|
6747
|
+
}
|
|
6748
|
+
}
|
|
6749
|
+
}
|
|
6750
|
+
},
|
|
6735
6751
|
"line-prefix": {
|
|
6736
6752
|
"value": "#9699a1",
|
|
6737
6753
|
"type": "color",
|
|
@@ -6875,7 +6891,6 @@
|
|
|
6875
6891
|
"type": "color",
|
|
6876
6892
|
"$extensions": {
|
|
6877
6893
|
"public": true,
|
|
6878
|
-
"resolveValue": true,
|
|
6879
6894
|
"com.figma": {
|
|
6880
6895
|
"exportAs": "variable",
|
|
6881
6896
|
"codeSyntax": {
|
|
@@ -10705,11 +10720,10 @@
|
|
|
10705
10720
|
"highlight": {
|
|
10706
10721
|
"background": {
|
|
10707
10722
|
"default": {
|
|
10708
|
-
"value": "{color.dark-mode.
|
|
10723
|
+
"value": "{color.dark-mode.interactive.background.current}",
|
|
10709
10724
|
"type": "color",
|
|
10710
10725
|
"$extensions": {
|
|
10711
10726
|
"public": true,
|
|
10712
|
-
"resolveValue": true,
|
|
10713
10727
|
"com.figma": {
|
|
10714
10728
|
"exportAs": "variable",
|
|
10715
10729
|
"codeSyntax": {
|
|
@@ -12699,7 +12713,7 @@
|
|
|
12699
12713
|
},
|
|
12700
12714
|
"reverse": {
|
|
12701
12715
|
"focus": {
|
|
12702
|
-
"value": "#
|
|
12716
|
+
"value": "#1b7ada",
|
|
12703
12717
|
"type": "color",
|
|
12704
12718
|
"$extensions": {
|
|
12705
12719
|
"public": true,
|
|
@@ -12713,7 +12727,7 @@
|
|
|
12713
12727
|
},
|
|
12714
12728
|
"link": {
|
|
12715
12729
|
"default": {
|
|
12716
|
-
"value": "#
|
|
12730
|
+
"value": "#0862b8",
|
|
12717
12731
|
"type": "color",
|
|
12718
12732
|
"$extensions": {
|
|
12719
12733
|
"public": true,
|
|
@@ -12752,7 +12766,7 @@
|
|
|
12752
12766
|
}
|
|
12753
12767
|
},
|
|
12754
12768
|
"visited": {
|
|
12755
|
-
"value": "#
|
|
12769
|
+
"value": "#0862b8",
|
|
12756
12770
|
"type": "color",
|
|
12757
12771
|
"$extensions": {
|
|
12758
12772
|
"public": true,
|
|
@@ -12767,7 +12781,7 @@
|
|
|
12767
12781
|
},
|
|
12768
12782
|
"foreground": {
|
|
12769
12783
|
"hover": {
|
|
12770
|
-
"value": "#
|
|
12784
|
+
"value": "#0862b8",
|
|
12771
12785
|
"type": "color",
|
|
12772
12786
|
"$extensions": {
|
|
12773
12787
|
"public": true,
|
|
@@ -14611,6 +14625,20 @@
|
|
|
14611
14625
|
}
|
|
14612
14626
|
}
|
|
14613
14627
|
},
|
|
14628
|
+
"focus": {
|
|
14629
|
+
"value": "{color.dark-mode.info.500}",
|
|
14630
|
+
"type": "color",
|
|
14631
|
+
"$extensions": {
|
|
14632
|
+
"public": true,
|
|
14633
|
+
"resolveValue": true,
|
|
14634
|
+
"com.figma": {
|
|
14635
|
+
"exportAs": "variable",
|
|
14636
|
+
"codeSyntax": {
|
|
14637
|
+
"WEB": "--pds-color-code-block-focus"
|
|
14638
|
+
}
|
|
14639
|
+
}
|
|
14640
|
+
}
|
|
14641
|
+
},
|
|
14614
14642
|
"line-prefix": {
|
|
14615
14643
|
"value": "#9699a1",
|
|
14616
14644
|
"type": "color",
|
|
@@ -14754,7 +14782,6 @@
|
|
|
14754
14782
|
"type": "color",
|
|
14755
14783
|
"$extensions": {
|
|
14756
14784
|
"public": true,
|
|
14757
|
-
"resolveValue": true,
|
|
14758
14785
|
"com.figma": {
|
|
14759
14786
|
"exportAs": "variable",
|
|
14760
14787
|
"codeSyntax": {
|
|
@@ -7,8 +7,8 @@ export const ANIMATION_DURATION_REVEAL = "300ms";
|
|
|
7
7
|
export const ANIMATION_TIMING_FUNCTION_DEFAULT = "cubic-bezier(.2, 0, 0, 1)";
|
|
8
8
|
export const ANIMATION_TRANSITION_BUTTON = "background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
|
|
9
9
|
export const ANIMATION_TRANSITION_DEFAULT = "all 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
|
|
10
|
-
export const ANIMATION_TRANSITION_FOCUS = "outline
|
|
11
|
-
export const ANIMATION_TRANSITION_INPUT = "border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms
|
|
10
|
+
export const ANIMATION_TRANSITION_FOCUS = "outline-offset 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
|
|
11
|
+
export const ANIMATION_TRANSITION_INPUT = "border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
|
|
12
12
|
export const ANIMATION_TRANSITION_LINK = "color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
|
|
13
13
|
export const ANIMATION_TRANSITION_REVEAL = "height 300ms cubic-bezier(.2, 0, 0, 1) 0ms, opacity 300ms cubic-bezier(.2, 0, 0, 1) 0ms, padding 300ms cubic-bezier(.2, 0, 0, 1) 0ms, width 300ms cubic-bezier(.2, 0, 0, 1) 0ms";
|
|
14
14
|
export const ANIMATION_TRANSITION_ROTATION = "transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
|
package/build/json/tokens.json
CHANGED
|
@@ -111,11 +111,11 @@
|
|
|
111
111
|
"public": true
|
|
112
112
|
},
|
|
113
113
|
"focus": {
|
|
114
|
-
"value": "outline
|
|
114
|
+
"value": "outline-offset 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
|
|
115
115
|
"filePath": "tokens/animation/semantic/semantic.json",
|
|
116
116
|
"isSource": true,
|
|
117
117
|
"original": {
|
|
118
|
-
"value": "outline
|
|
118
|
+
"value": "outline-offset {animation.duration.default} {animation.timing-function.default} 0ms, box-shadow {animation.duration.default} {animation.timing-function.default} 0ms, border-color {animation.duration.default} {animation.timing-function.default} 0ms",
|
|
119
119
|
"public": true
|
|
120
120
|
},
|
|
121
121
|
"name": "AnimationTransitionFocus",
|
|
@@ -132,11 +132,11 @@
|
|
|
132
132
|
"public": true
|
|
133
133
|
},
|
|
134
134
|
"input": {
|
|
135
|
-
"value": "border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms
|
|
135
|
+
"value": "border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
|
|
136
136
|
"filePath": "tokens/animation/semantic/semantic.json",
|
|
137
137
|
"isSource": true,
|
|
138
138
|
"original": {
|
|
139
|
-
"value": "border-color {animation.duration.default} {animation.timing-function.default} 0ms, background-color {animation.duration.default} {animation.timing-function.default} 0ms, box-shadow {animation.duration.default} {animation.timing-function.default} 0ms
|
|
139
|
+
"value": "border-color {animation.duration.default} {animation.timing-function.default} 0ms, background-color {animation.duration.default} {animation.timing-function.default} 0ms, box-shadow {animation.duration.default} {animation.timing-function.default} 0ms",
|
|
140
140
|
"public": true
|
|
141
141
|
},
|
|
142
142
|
"name": "AnimationTransitionInput",
|
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.
|
|
4
|
+
"version": "2.0.0-alpha.61",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"registry": "https://registry.npmjs.org/",
|
|
@@ -62,6 +62,6 @@
|
|
|
62
62
|
"glob": "^11.0.3",
|
|
63
63
|
"nodemon": "^3.1.10",
|
|
64
64
|
"prettier": "^2.8.3",
|
|
65
|
-
"style-dictionary": "^5.0
|
|
65
|
+
"style-dictionary": "^5.5.0"
|
|
66
66
|
}
|
|
67
67
|
}
|