@pantheon-systems/pds-design-tokens 2.0.0-alpha.46 → 2.0.0-alpha.48

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 (8) hide show
  1. package/build/css/variables.dark.css +32 -18
  2. package/build/css/variables.global.css +0 -3
  3. package/build/css/variables.light.css +19 -5
  4. package/build/figma/tokens.json +1213 -268
  5. package/build/js/variables.global.d.ts +0 -3
  6. package/build/js/variables.global.js +0 -3
  7. package/build/json/tokens.json +0 -69
  8. package/package.json +1 -1
package/build/css/variables.dark.css CHANGED
@@ -64,18 +64,18 @@
64
64
  --pds-color-badge-gold-muted-background: oklch(0.3989 0.0551 79.95);
65
65
  --pds-color-badge-gold-muted-foreground: oklch(0.9281 0.0348 98.08);
66
66
  --pds-color-banner-info-background: oklch(0.4662 0.0924 245.48);
67
- --pds-color-banner-info-foreground: oklch(0.2178 0 0);
67
+ --pds-color-banner-info-foreground: oklch(0.9702 0 0);
68
68
  --pds-color-banner-warning-background: oklch(0.5428 0.1292 52.61);
69
- --pds-color-banner-warning-foreground: oklch(0.2178 0 0);
69
+ --pds-color-banner-warning-foreground: oklch(0.9702 0 0);
70
70
  --pds-color-banner-critical-background: oklch(0.5338 0.1771 25.54);
71
- --pds-color-banner-critical-foreground: oklch(0.2178 0 0);
71
+ --pds-color-banner-critical-foreground: oklch(0.9702 0 0);
72
72
  --pds-color-banner-discovery-background: oklch(0.5200 0.1177 303.12);
73
- --pds-color-banner-discovery-foreground: oklch(0.2178 0 0);
73
+ --pds-color-banner-discovery-foreground: oklch(0.9702 0 0);
74
74
  --pds-color-banner-neutral-background: oklch(0.5103 0 0);
75
- --pds-color-banner-neutral-foreground: oklch(0.2178 0 0);
75
+ --pds-color-banner-neutral-foreground: oklch(0.9702 0 0);
76
76
  --pds-color-card-background: oklch(0.2178 0 0);
77
- --pds-color-code-block-dark-background: var(--pds-color-surface-reverse);
78
- --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
77
+ --pds-color-code-block-dark-background: oklch(1.0000 0 0);
78
+ --pds-color-code-block-dark-foreground: oklch(1.0000 0 0);
79
79
  --pds-color-code-block-dark-line-prefix: #9699A1;
80
80
  --pds-color-code-block-dark-highlight: #474954;
81
81
  --pds-color-code-block-light-background: #EFF0F0;
@@ -97,9 +97,7 @@
97
97
  --pds-color-pagination-background-hover: oklch(0.2603 0 0);
98
98
  --pds-color-pagination-background-active: oklch(0.2000 0.0400 268.00);
99
99
  --pds-color-pagination-background-current: oklch(0.6496 0.1590 270.95);
100
- --pds-color-panel-sunken-background: oklch(0.2178 0 0);
101
- --pds-color-panel-raised-background: oklch(0.2178 0 0);
102
- --pds-color-panel-overlay-background: oklch(0.2178 0 0);
100
+ --pds-color-panel-sunken-background: oklch(0.2603 0 0);
103
101
  --pds-color-expansion-panel-hover: oklch(0.2931 0 0);
104
102
  --pds-color-expansion-panel-open: oklch(0.2931 0 0);
105
103
  --pds-color-popover-border: oklch(0.31 0.005 258);
@@ -180,38 +178,44 @@
180
178
  --pds-color-border-separator: oklch(0.5991 0 0);
181
179
  --pds-color-border-hover: oklch(0.5 0.005 264);
182
180
  --pds-color-button-primary-background-default: oklch(0.9702 0 0);
183
- --pds-color-button-primary-background-hover: oklch(0.9388 0.0118 239.91);
181
+ --pds-color-button-primary-background-hover: oklch(0.8800 0 0);
182
+ --pds-color-button-primary-background-active: oklch(0.8096 0 0);
184
183
  --pds-color-button-primary-foreground: oklch(0.2178 0 0);
185
184
  --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
186
185
  --pds-color-button-secondary-background-hover: oklch(0.2931 0 0);
186
+ --pds-color-button-secondary-background-active: oklch(0.3638 0 0);
187
187
  --pds-color-button-secondary-border: oklch(0.5103 0 0);
188
- --pds-color-button-secondary-foreground-default: oklch(0.2178 0 0);
189
- --pds-color-button-secondary-foreground-hover: oklch(0.2178 0 0);
188
+ --pds-color-button-secondary-foreground-default: oklch(0.9702 0 0);
189
+ --pds-color-button-secondary-foreground-hover: oklch(0.9702 0 0);
190
190
  --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
191
191
  --pds-color-button-subtle-background-hover: oklch(0.2931 0 0);
192
+ --pds-color-button-subtle-background-active: oklch(0.3426 0 0);
192
193
  --pds-color-button-subtle-foreground: oklch(0.9702 0 0);
193
194
  --pds-color-button-brand-background-default: oklch(0.8622 0.1681 88.31);
194
195
  --pds-color-button-brand-background-hover: oklch(0.7640 0.1510 84.30);
196
+ --pds-color-button-brand-background-active: oklch(0.6723 0.1329 84.30);
195
197
  --pds-color-button-brand-foreground: oklch(0.2178 0 0);
196
198
  --pds-color-button-highlight-background-default: oklch(0.5256 0.1988 268.04);
197
199
  --pds-color-button-highlight-background-hover: oklch(0.4293 0.1892 266.63);
200
+ --pds-color-button-highlight-background-active: oklch(0.3778 0.1665 266.63);
198
201
  --pds-color-button-highlight-foreground: oklch(1.0000 0 0);
199
202
  --pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
200
203
  --pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
201
- --pds-color-button-critical-foreground: oklch(0.2178 0 0);
204
+ --pds-color-button-critical-background-active: oklch(0.3961 0.1391 26.35);
205
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
202
206
  --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
203
207
  --pds-color-button-critical-secondary-background-hover: oklch(0.4501 0.1581 26.35 / 25%);
208
+ --pds-color-button-critical-secondary-background-active: oklch(0.4666 0.1534 26.35);
204
209
  --pds-color-button-critical-secondary-border-default: oklch(0.5954 0.1582 23.19);
205
210
  --pds-color-button-critical-secondary-border-hover: oklch(0.5954 0.1582 23.19);
206
211
  --pds-color-button-critical-secondary-foreground: oklch(0.5954 0.1582 23.19);
207
- --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
208
- --pds-color-button-navbar-background-hover: oklch(0.2603 0 0);
209
- --pds-color-button-navbar-foreground: oklch(0.8452 0 0);
210
212
  --pds-color-button-reverse-background-default: oklch(0.2178 0 0);
211
- --pds-color-button-reverse-background-hover: oklch(0.3493 0.0293 246.75);
213
+ --pds-color-button-reverse-background-hover: oklch(0.3100 0 0);
214
+ --pds-color-button-reverse-background-active: oklch(0.3652 0 0);
212
215
  --pds-color-button-reverse-foreground: oklch(0.9702 0 0);
213
216
  --pds-color-button-reverse-secondary-background-default: rgba(255, 255, 255, 0.00);
214
217
  --pds-color-button-reverse-secondary-background-hover: oklch(0.9430 0 0);
218
+ --pds-color-button-reverse-secondary-background-active: oklch(0.9147 0 0);
215
219
  --pds-color-button-reverse-secondary-border: oklch(0.8047 0 0);
216
220
  --pds-color-button-reverse-secondary-foreground: oklch(0.2178 0 0);
217
221
  --pds-color-close-button-foreground: oklch(0.8452 0 0);
@@ -329,6 +333,7 @@
329
333
  --pds-color-interactive-ui-hover: oklch(0.6496 0.1590 270.95);
330
334
  --pds-color-interactive-ui-active: oklch(0.6496 0.1590 270.95);
331
335
  --pds-color-interactive-ui-current: oklch(0.6496 0.1590 270.95);
336
+ --pds-color-interactive-ui-inactive: oklch(0.5991 0 0);
332
337
  --pds-color-interactive-ui-background-hover: oklch(0.2603 0 0);
333
338
  --pds-color-interactive-ui-background-active: oklch(0.2931 0 0);
334
339
  --pds-color-interactive-ui-background-selected: oklch(0.2000 0.0400 268.00);
@@ -375,6 +380,15 @@
375
380
  --pds-color-status-neutral-indicator: oklch(0.8452 0 0);
376
381
  --pds-color-status-frozen-fill: oklch(0.6392 0.0968 238.41);
377
382
  --pds-color-status-disabled-fill: oklch(0.5103 0 0);
383
+ --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
384
+ --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.16);
385
+ --pds-elevation-button-subtle-active: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.16);
386
+ --pds-elevation-button-critical-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
387
+ --pds-elevation-button-critical-secondary-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.16);
388
+ --pds-elevation-button-brand-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
389
+ --pds-elevation-button-highlight-active: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.15);
390
+ --pds-elevation-button-reverse-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.15);
391
+ --pds-elevation-button-reverse-secondary-active: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
378
392
  --pds-elevation-drawer-left: 2px 0px 32px 0px rgba(0, 0, 0, 0.8), 1px 0px 0px 0px rgba(255, 255, 255, 0.12);
379
393
  --pds-elevation-drawer-right: -2px 0px 32px 0px rgba(0, 0, 0, 0.8), -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
380
394
  --pds-elevation-icon-button-pressed: inset 0px 0px 4px 1px rgba(255, 255, 255, 0.06);
package/build/css/variables.global.css CHANGED
@@ -63,17 +63,14 @@
63
63
  --pds-spacing-button-height-s: var(--pds-spacing-2xl);
64
64
  --pds-spacing-button-height-m: var(--pds-spacing-3xl);
65
65
  --pds-spacing-button-height-l: var(--pds-spacing-4xl);
66
- --pds-spacing-button-height-xl: 3.5rem;
67
66
  --pds-spacing-button-padding-inline-xs: var(--pds-spacing-s);
68
67
  --pds-spacing-button-padding-inline-s: var(--pds-spacing-m);
69
68
  --pds-spacing-button-padding-inline-m: var(--pds-spacing-l);
70
69
  --pds-spacing-button-padding-inline-l: var(--pds-spacing-xl);
71
- --pds-spacing-button-padding-inline-xl: 2.25rem;
72
70
  --pds-spacing-button-gap-inline-xs: var(--pds-spacing-2xs);
73
71
  --pds-spacing-button-gap-inline-s: var(--pds-spacing-2xs);
74
72
  --pds-spacing-button-gap-inline-m: var(--pds-spacing-xs);
75
73
  --pds-spacing-button-gap-inline-l: var(--pds-spacing-xs);
76
- --pds-spacing-button-gap-inline-xl: var(--pds-spacing-xs);
77
74
  --pds-spacing-input-height-s: var(--pds-spacing-2xl);
78
75
  --pds-spacing-input-height-m: var(--pds-spacing-3xl);
79
76
  --pds-spacing-input-height-l: var(--pds-spacing-4xl);
package/build/css/variables.light.css CHANGED
@@ -98,8 +98,6 @@
98
98
  --pds-color-pagination-background-active: oklch(0.9500 0.0300 268.00);
99
99
  --pds-color-pagination-background-current: oklch(0.5256 0.1988 268.04);
100
100
  --pds-color-panel-sunken-background: oklch(0.9702 0 0);
101
- --pds-color-panel-raised-background: oklch(0.9702 0 0);
102
- --pds-color-panel-overlay-background: oklch(0.9702 0 0);
103
101
  --pds-color-expansion-panel-hover: oklch(0.9702 0 0);
104
102
  --pds-color-expansion-panel-open: oklch(0.9702 0 0);
105
103
  --pds-color-popover-border: oklch(0.9430 0 0);
@@ -181,37 +179,43 @@
181
179
  --pds-color-border-hover: oklch(0.85 0 0);
182
180
  --pds-color-button-primary-background-default: oklch(0.2178 0 0);
183
181
  --pds-color-button-primary-background-hover: oklch(0.3493 0.0293 246.75);
182
+ --pds-color-button-primary-background-active: oklch(0.4144 0.0264 246.75);
184
183
  --pds-color-button-primary-foreground: var(--pds-color-foreground-reverse);
185
184
  --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
186
185
  --pds-color-button-secondary-background-hover: oklch(0.9702 0 0);
186
+ --pds-color-button-secondary-background-active: oklch(0.9702 0 0);
187
187
  --pds-color-button-secondary-border: oklch(0.8047 0 0);
188
188
  --pds-color-button-secondary-foreground-default: oklch(0.2178 0 0);
189
189
  --pds-color-button-secondary-foreground-hover: oklch(0.2178 0 0);
190
190
  --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
191
191
  --pds-color-button-subtle-background-hover: oklch(0.9702 0 0);
192
+ --pds-color-button-subtle-background-active: oklch(0.9702 0 0);
192
193
  --pds-color-button-subtle-foreground: oklch(0.2178 0 0);
193
194
  --pds-color-button-brand-background-default: oklch(0.8622 0.1681 88.31);
194
195
  --pds-color-button-brand-background-hover: oklch(0.8018 0.1553 87.86);
196
+ --pds-color-button-brand-background-active: oklch(0.7457 0.1444 87.86);
195
197
  --pds-color-button-brand-foreground: oklch(0.2178 0 0);
196
198
  --pds-color-button-highlight-background-default: oklch(0.5256 0.1988 268.04);
197
199
  --pds-color-button-highlight-background-hover: oklch(0.4293 0.1892 266.63);
200
+ --pds-color-button-highlight-background-active: oklch(0.3864 0.1703 266.63);
198
201
  --pds-color-button-highlight-foreground: oklch(1.0000 0 0);
199
202
  --pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
200
203
  --pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
204
+ --pds-color-button-critical-background-active: oklch(0.4051 0.1423 26.35);
201
205
  --pds-color-button-critical-foreground: oklch(1.0000 0 0);
202
206
  --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
203
207
  --pds-color-button-critical-secondary-background-hover: oklch(0.9740 0.0075 17.42);
208
+ --pds-color-button-critical-secondary-background-active: oklch(0.9740 0.0075 17.42);
204
209
  --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
205
210
  --pds-color-button-critical-secondary-border-hover: var(--pds-color-status-critical-foreground);
206
211
  --pds-color-button-critical-secondary-foreground: oklch(0.4501 0.1581 26.35);
207
- --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
208
- --pds-color-button-navbar-background-hover: oklch(0.9702 0 0);
209
- --pds-color-button-navbar-foreground: oklch(0.2178 0 0);
210
212
  --pds-color-button-reverse-background-default: oklch(0.9702 0 0);
211
213
  --pds-color-button-reverse-background-hover: oklch(0.8761 0 0);
214
+ --pds-color-button-reverse-background-active: oklch(0.8148 0 0);
212
215
  --pds-color-button-reverse-foreground: oklch(0.2178 0 0);
213
216
  --pds-color-button-reverse-secondary-background-default: rgba(255, 255, 255, 0.00);
214
217
  --pds-color-button-reverse-secondary-background-hover: oklch(0.2931 0 0);
218
+ --pds-color-button-reverse-secondary-background-active: oklch(0.3638 0 0);
215
219
  --pds-color-button-reverse-secondary-border: oklch(0.5103 0 0);
216
220
  --pds-color-button-reverse-secondary-foreground: oklch(1.0000 0 0);
217
221
  --pds-color-close-button-foreground: oklch(0.5173 0 0);
@@ -329,6 +333,7 @@
329
333
  --pds-color-interactive-ui-hover: oklch(0.5256 0.1988 268.04);
330
334
  --pds-color-interactive-ui-active: oklch(0.5256 0.1988 268.04);
331
335
  --pds-color-interactive-ui-current: oklch(0.5256 0.1988 268.04);
336
+ --pds-color-interactive-ui-inactive: oklch(0.8047 0 0);
332
337
  --pds-color-interactive-ui-background-hover: oklch(0.9702 0 0);
333
338
  --pds-color-interactive-ui-background-active: oklch(0.9430 0 0);
334
339
  --pds-color-interactive-ui-background-selected: oklch(0.9500 0.0300 268.00);
@@ -375,6 +380,15 @@
375
380
  --pds-color-status-neutral-indicator: oklch(0.5173 0 0);
376
381
  --pds-color-status-frozen-fill: oklch(0.5510 0.1014 242.56);
377
382
  --pds-color-status-disabled-fill: oklch(0.8047 0 0);
383
+ --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
384
+ --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
385
+ --pds-elevation-button-subtle-active: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
386
+ --pds-elevation-button-critical-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
387
+ --pds-elevation-button-critical-secondary-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
388
+ --pds-elevation-button-brand-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
389
+ --pds-elevation-button-highlight-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
390
+ --pds-elevation-button-reverse-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
391
+ --pds-elevation-button-reverse-secondary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
378
392
  --pds-elevation-drawer-left: 4px 0px 16px 0px rgba(0, 0, 0, 0.08);
379
393
  --pds-elevation-drawer-right: -4px 0px 16px 0px rgba(0, 0, 0, 0.08);
380
394
  --pds-elevation-icon-button-pressed: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.04);