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

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 +28 -13
  2. package/build/css/variables.global.css +0 -3
  3. package/build/css/variables.light.css +18 -3
  4. package/build/figma/tokens.json +1201 -218
  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,15 +64,15 @@
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
77
  --pds-color-code-block-dark-background: var(--pds-color-surface-reverse);
78
78
  --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
@@ -180,38 +180,44 @@
180
180
  --pds-color-border-separator: oklch(0.5991 0 0);
181
181
  --pds-color-border-hover: oklch(0.5 0.005 264);
182
182
  --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);
183
+ --pds-color-button-primary-background-hover: oklch(0.8800 0 0);
184
+ --pds-color-button-primary-background-active: oklch(0.8096 0 0);
184
185
  --pds-color-button-primary-foreground: oklch(0.2178 0 0);
185
186
  --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
186
187
  --pds-color-button-secondary-background-hover: oklch(0.2931 0 0);
188
+ --pds-color-button-secondary-background-active: oklch(0.3638 0 0);
187
189
  --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);
190
+ --pds-color-button-secondary-foreground-default: oklch(0.9702 0 0);
191
+ --pds-color-button-secondary-foreground-hover: oklch(0.9702 0 0);
190
192
  --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
191
193
  --pds-color-button-subtle-background-hover: oklch(0.2931 0 0);
194
+ --pds-color-button-subtle-background-active: oklch(0.3426 0 0);
192
195
  --pds-color-button-subtle-foreground: oklch(0.9702 0 0);
193
196
  --pds-color-button-brand-background-default: oklch(0.8622 0.1681 88.31);
194
197
  --pds-color-button-brand-background-hover: oklch(0.7640 0.1510 84.30);
198
+ --pds-color-button-brand-background-active: oklch(0.6723 0.1329 84.30);
195
199
  --pds-color-button-brand-foreground: oklch(0.2178 0 0);
196
200
  --pds-color-button-highlight-background-default: oklch(0.5256 0.1988 268.04);
197
201
  --pds-color-button-highlight-background-hover: oklch(0.4293 0.1892 266.63);
202
+ --pds-color-button-highlight-background-active: oklch(0.3778 0.1665 266.63);
198
203
  --pds-color-button-highlight-foreground: oklch(1.0000 0 0);
199
204
  --pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
200
205
  --pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
201
- --pds-color-button-critical-foreground: oklch(0.2178 0 0);
206
+ --pds-color-button-critical-background-active: oklch(0.3961 0.1391 26.35);
207
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
202
208
  --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
203
209
  --pds-color-button-critical-secondary-background-hover: oklch(0.4501 0.1581 26.35 / 25%);
210
+ --pds-color-button-critical-secondary-background-active: oklch(0.4666 0.1534 26.35);
204
211
  --pds-color-button-critical-secondary-border-default: oklch(0.5954 0.1582 23.19);
205
212
  --pds-color-button-critical-secondary-border-hover: oklch(0.5954 0.1582 23.19);
206
213
  --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
214
  --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);
215
+ --pds-color-button-reverse-background-hover: oklch(0.3100 0 0);
216
+ --pds-color-button-reverse-background-active: oklch(0.3652 0 0);
212
217
  --pds-color-button-reverse-foreground: oklch(0.9702 0 0);
213
218
  --pds-color-button-reverse-secondary-background-default: rgba(255, 255, 255, 0.00);
214
219
  --pds-color-button-reverse-secondary-background-hover: oklch(0.9430 0 0);
220
+ --pds-color-button-reverse-secondary-background-active: oklch(0.9147 0 0);
215
221
  --pds-color-button-reverse-secondary-border: oklch(0.8047 0 0);
216
222
  --pds-color-button-reverse-secondary-foreground: oklch(0.2178 0 0);
217
223
  --pds-color-close-button-foreground: oklch(0.8452 0 0);
@@ -375,6 +381,15 @@
375
381
  --pds-color-status-neutral-indicator: oklch(0.8452 0 0);
376
382
  --pds-color-status-frozen-fill: oklch(0.6392 0.0968 238.41);
377
383
  --pds-color-status-disabled-fill: oklch(0.5103 0 0);
384
+ --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
385
+ --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.16);
386
+ --pds-elevation-button-subtle-active: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.16);
387
+ --pds-elevation-button-critical-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
388
+ --pds-elevation-button-critical-secondary-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.16);
389
+ --pds-elevation-button-brand-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
390
+ --pds-elevation-button-highlight-active: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.15);
391
+ --pds-elevation-button-reverse-active: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.15);
392
+ --pds-elevation-button-reverse-secondary-active: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
378
393
  --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
394
  --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
395
  --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
@@ -181,37 +181,43 @@
181
181
  --pds-color-border-hover: oklch(0.85 0 0);
182
182
  --pds-color-button-primary-background-default: oklch(0.2178 0 0);
183
183
  --pds-color-button-primary-background-hover: oklch(0.3493 0.0293 246.75);
184
+ --pds-color-button-primary-background-active: oklch(0.4144 0.0264 246.75);
184
185
  --pds-color-button-primary-foreground: var(--pds-color-foreground-reverse);
185
186
  --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
186
187
  --pds-color-button-secondary-background-hover: oklch(0.9702 0 0);
188
+ --pds-color-button-secondary-background-active: oklch(0.9702 0 0);
187
189
  --pds-color-button-secondary-border: oklch(0.8047 0 0);
188
190
  --pds-color-button-secondary-foreground-default: oklch(0.2178 0 0);
189
191
  --pds-color-button-secondary-foreground-hover: oklch(0.2178 0 0);
190
192
  --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
191
193
  --pds-color-button-subtle-background-hover: oklch(0.9702 0 0);
194
+ --pds-color-button-subtle-background-active: oklch(0.9702 0 0);
192
195
  --pds-color-button-subtle-foreground: oklch(0.2178 0 0);
193
196
  --pds-color-button-brand-background-default: oklch(0.8622 0.1681 88.31);
194
197
  --pds-color-button-brand-background-hover: oklch(0.8018 0.1553 87.86);
198
+ --pds-color-button-brand-background-active: oklch(0.7457 0.1444 87.86);
195
199
  --pds-color-button-brand-foreground: oklch(0.2178 0 0);
196
200
  --pds-color-button-highlight-background-default: oklch(0.5256 0.1988 268.04);
197
201
  --pds-color-button-highlight-background-hover: oklch(0.4293 0.1892 266.63);
202
+ --pds-color-button-highlight-background-active: oklch(0.3864 0.1703 266.63);
198
203
  --pds-color-button-highlight-foreground: oklch(1.0000 0 0);
199
204
  --pds-color-button-critical-background-default: oklch(0.5338 0.1771 25.54);
200
205
  --pds-color-button-critical-background-hover: oklch(0.4501 0.1581 26.35);
206
+ --pds-color-button-critical-background-active: oklch(0.4051 0.1423 26.35);
201
207
  --pds-color-button-critical-foreground: oklch(1.0000 0 0);
202
208
  --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
203
209
  --pds-color-button-critical-secondary-background-hover: oklch(0.9740 0.0075 17.42);
210
+ --pds-color-button-critical-secondary-background-active: oklch(0.9740 0.0075 17.42);
204
211
  --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
205
212
  --pds-color-button-critical-secondary-border-hover: var(--pds-color-status-critical-foreground);
206
213
  --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
214
  --pds-color-button-reverse-background-default: oklch(0.9702 0 0);
211
215
  --pds-color-button-reverse-background-hover: oklch(0.8761 0 0);
216
+ --pds-color-button-reverse-background-active: oklch(0.8148 0 0);
212
217
  --pds-color-button-reverse-foreground: oklch(0.2178 0 0);
213
218
  --pds-color-button-reverse-secondary-background-default: rgba(255, 255, 255, 0.00);
214
219
  --pds-color-button-reverse-secondary-background-hover: oklch(0.2931 0 0);
220
+ --pds-color-button-reverse-secondary-background-active: oklch(0.3638 0 0);
215
221
  --pds-color-button-reverse-secondary-border: oklch(0.5103 0 0);
216
222
  --pds-color-button-reverse-secondary-foreground: oklch(1.0000 0 0);
217
223
  --pds-color-close-button-foreground: oklch(0.5173 0 0);
@@ -375,6 +381,15 @@
375
381
  --pds-color-status-neutral-indicator: oklch(0.5173 0 0);
376
382
  --pds-color-status-frozen-fill: oklch(0.5510 0.1014 242.56);
377
383
  --pds-color-status-disabled-fill: oklch(0.8047 0 0);
384
+ --pds-elevation-button-primary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
385
+ --pds-elevation-button-secondary-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
386
+ --pds-elevation-button-subtle-active: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
387
+ --pds-elevation-button-critical-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
388
+ --pds-elevation-button-critical-secondary-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
389
+ --pds-elevation-button-brand-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
390
+ --pds-elevation-button-highlight-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
391
+ --pds-elevation-button-reverse-active: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
392
+ --pds-elevation-button-reverse-secondary-active: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
378
393
  --pds-elevation-drawer-left: 4px 0px 16px 0px rgba(0, 0, 0, 0.08);
379
394
  --pds-elevation-drawer-right: -4px 0px 16px 0px rgba(0, 0, 0, 0.08);
380
395
  --pds-elevation-icon-button-pressed: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.04);