@pantheon-systems/pds-design-tokens 1.0.0-dev.152 → 1.0.0-dev.154

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/pds-design-tokens-dark-mode.css +124 -126
  2. package/build/css/pds-design-tokens-light-mode.css +20 -14
  3. package/build/css/pds-design-tokens.css +7 -0
  4. package/build/figma/pds-design-tokens-figma.json +1939 -2002
  5. package/build/json/pds-design-tokens-dark-mode.json +1366 -1477
  6. package/build/json/pds-design-tokens-light-mode.json +599 -517
  7. package/build/json/pds-design-tokens.json +49 -8
  8. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -10,41 +10,41 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-color-background-default: #121219;
14
- --pds-color-background-default-secondary: #1d1d29;
15
- --pds-color-background-reverse: #e7e7eb;
16
- --pds-color-badge-indicator-brand-background: #8a70ff;
13
+ --pds-color-background-default: #1a1b20;
14
+ --pds-color-background-default-secondary: #121219;
15
+ --pds-color-background-reverse: #b5b5bc;
16
+ --pds-color-badge-indicator-brand-background: #745dd8;
17
17
  --pds-color-badge-indicator-brand-foreground: #ffffff;
18
- --pds-color-badge-indicator-critical-background: #ef5c48;
18
+ --pds-color-badge-indicator-critical-background: #a70000;
19
19
  --pds-color-badge-indicator-critical-foreground: #ffffff;
20
- --pds-color-badge-indicator-diamond-background: #f0fdff;
21
- --pds-color-badge-indicator-diamond-foreground: #388bff;
20
+ --pds-color-badge-indicator-diamond-background: #d3e7fd;
21
+ --pds-color-badge-indicator-diamond-foreground: #005cc8;
22
22
  --pds-color-badge-indicator-gold-background: #ffe668;
23
23
  --pds-color-badge-indicator-gold-foreground: #705e00;
24
- --pds-color-badge-indicator-info-background: #388bff;
24
+ --pds-color-badge-indicator-info-background: #005cc8;
25
25
  --pds-color-badge-indicator-info-foreground: #ffffff;
26
- --pds-color-badge-indicator-neutral-background: #504e62;
26
+ --pds-color-badge-indicator-neutral-background: #6d6d78;
27
27
  --pds-color-badge-indicator-neutral-foreground: #ffffff;
28
- --pds-color-badge-indicator-platinum-background: #fff1a9;
29
- --pds-color-badge-indicator-platinum-foreground: #ddbd16;
30
- --pds-color-badge-indicator-silver-background: #a6a3b4;
31
- --pds-color-badge-indicator-silver-foreground: var(--pds-color-foreground-default-secondary);
32
- --pds-color-badge-indicator-success-background: #2abb7f;
28
+ --pds-color-badge-indicator-platinum-background: #cbc2f0;
29
+ --pds-color-badge-indicator-platinum-foreground: #42318d;
30
+ --pds-color-badge-indicator-silver-background: #b5b5bc;
31
+ --pds-color-badge-indicator-silver-foreground: #2f323d;
32
+ --pds-color-badge-indicator-success-background: #00710f;
33
33
  --pds-color-badge-indicator-success-foreground: #ffffff;
34
- --pds-color-badge-indicator-warning-background: #cf9f02;
34
+ --pds-color-badge-indicator-warning-background: #bd5b00;
35
35
  --pds-color-badge-indicator-warning-foreground: #ffffff;
36
- --pds-color-banner-critical-background: #d34431;
36
+ --pds-color-banner-critical-background: #a70000;
37
37
  --pds-color-banner-critical-foreground: #ffffff;
38
- --pds-color-banner-info-background: #3575d0;
38
+ --pds-color-banner-info-background: #005cc8;
39
39
  --pds-color-banner-info-foreground: #ffffff;
40
- --pds-color-banner-warning-background: #f5b730;
41
- --pds-color-banner-warning-foreground: #121219;
42
- --pds-color-border-brand: #ad9bff;
43
- --pds-color-border-default: #504e62;
44
- --pds-color-border-input: #858299;
45
- --pds-color-border-separator: #858299;
40
+ --pds-color-banner-warning-background: #bd5b00;
41
+ --pds-color-banner-warning-foreground: #ffffff;
42
+ --pds-color-border-brand: #9786e2;
43
+ --pds-color-border-default: #6d6d78;
44
+ --pds-color-border-input: #6d6d78;
45
+ --pds-color-border-separator: #6d6d78;
46
46
  --pds-color-brand-accent-default: #de0093;
47
- --pds-color-brand-primary-default: #8a70ff;
47
+ --pds-color-brand-primary-default: #745dd8;
48
48
  --pds-color-brand-secondary-default: #ffdc28;
49
49
  --pds-color-button-brand-background-active: #ddbd16;
50
50
  --pds-color-button-brand-background-default: #ffdc28;
@@ -55,14 +55,14 @@
55
55
  --pds-color-button-brand-foreground-active: #121219;
56
56
  --pds-color-button-brand-foreground-default: #121219;
57
57
  --pds-color-button-brand-foreground-hover: #121219;
58
- --pds-color-button-brand-secondary-background-active: #282839;
58
+ --pds-color-button-brand-secondary-background-active: #1a1b20;
59
59
  --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
60
- --pds-color-button-brand-secondary-background-hover: #504e62;
61
- --pds-color-button-brand-secondary-border-active: #504e62;
62
- --pds-color-button-brand-secondary-border-default: #a6a3b4;
60
+ --pds-color-button-brand-secondary-background-hover: #20232c;
61
+ --pds-color-button-brand-secondary-border-active: #20232c;
62
+ --pds-color-button-brand-secondary-border-default: #6d6d78;
63
63
  --pds-color-button-brand-secondary-border-hover: #ffffff;
64
- --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
65
- --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
64
+ --pds-color-button-brand-secondary-foreground-active: #b5b5bc;
65
+ --pds-color-button-brand-secondary-foreground-default: #b5b5bc;
66
66
  --pds-color-button-brand-secondary-foreground-hover: #ffffff;
67
67
  --pds-color-button-critical-background-active: #4b2d28;
68
68
  --pds-color-button-critical-background-default: var(--pds-color-background-default);
@@ -76,133 +76,131 @@
76
76
  --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
77
77
  --pds-color-button-navbar-foreground-default: #ffffff;
78
78
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
79
- --pds-color-button-primary-background-active: #4e39a8;
80
- --pds-color-button-primary-background-default: #4e39a8;
81
- --pds-color-button-primary-background-hover: #2e1d78;
82
- --pds-color-button-primary-border-active: #4e39a8;
83
- --pds-color-button-primary-border-default: #4e39a8;
84
- --pds-color-button-primary-border-hover: #2e1d78;
79
+ --pds-color-button-primary-background-active: #42318d;
80
+ --pds-color-button-primary-background-default: #42318d;
81
+ --pds-color-button-primary-background-hover: #2c205e;
82
+ --pds-color-button-primary-border-active: #42318d;
83
+ --pds-color-button-primary-border-default: #42318d;
84
+ --pds-color-button-primary-border-hover: #2c205e;
85
85
  --pds-color-button-primary-foreground-active: #ffffff;
86
86
  --pds-color-button-primary-foreground-default: #ffffff;
87
87
  --pds-color-button-primary-foreground-hover: #ffffff;
88
- --pds-color-button-secondary-background-active: #282839;
88
+ --pds-color-button-secondary-background-active: #1a1b20;
89
89
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
90
- --pds-color-button-secondary-background-hover: #504e62;
91
- --pds-color-button-secondary-border-active: #504e62;
92
- --pds-color-button-secondary-border-default: #a6a3b4;
90
+ --pds-color-button-secondary-background-hover: #20232c;
91
+ --pds-color-button-secondary-border-active: #20232c;
92
+ --pds-color-button-secondary-border-default: #6d6d78;
93
93
  --pds-color-button-secondary-border-hover: #ffffff;
94
- --pds-color-button-secondary-foreground-active: #e7e7eb;
95
- --pds-color-button-secondary-foreground-default: #e7e7eb;
94
+ --pds-color-button-secondary-foreground-active: #b5b5bc;
95
+ --pds-color-button-secondary-foreground-default: #b5b5bc;
96
96
  --pds-color-button-secondary-foreground-hover: #ffffff;
97
97
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
98
98
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
99
- --pds-color-button-subtle-foreground-active: #8a70ff;
100
- --pds-color-button-subtle-foreground-default: #d0c6ff;
101
- --pds-color-button-subtle-foreground-hover: #8a70ff;
102
- --pds-color-code-inline-background: #282839;
103
- --pds-color-code-inline-border: #504e62;
99
+ --pds-color-button-subtle-foreground-active: #745dd8;
100
+ --pds-color-button-subtle-foreground-default: #cbc2f0;
101
+ --pds-color-button-subtle-foreground-hover: #745dd8;
102
+ --pds-color-card-background: #1f2026;
103
+ --pds-color-code-inline-background: #1a1b20;
104
+ --pds-color-code-inline-border: #20232c;
104
105
  --pds-color-code-inline-text: #ffffff;
105
- --pds-color-dropdown-background: var(--pds-color-background-default-secondary);
106
+ --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
107
+ --pds-color-dashboard-nav-background-admin: #252038;
108
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
109
+ --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
110
+ --pds-color-dashboard-nav-item-background-hover: #6d6d78;
111
+ --pds-color-dashboard-nav-item-background-hover-admin: #121219;
112
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
113
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
114
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
115
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-background-reverse);
116
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-foreground-reverse);
117
+ --pds-color-dropdown-background: #20232c;
106
118
  --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
107
119
  --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
108
120
  --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
109
121
  --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
110
122
  --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
111
123
  --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
112
- --pds-color-dropdown-top-border: #504e62;
113
- --pds-color-expansion-panel-hover: #282839;
114
- --pds-color-expansion-panel-open: #282839;
124
+ --pds-color-dropdown-top-border: rgba(0, 0, 0, 0);
125
+ --pds-color-expansion-panel-hover: #20232c;
126
+ --pds-color-expansion-panel-open: #20232c;
115
127
  --pds-color-foreground-default: #ffffff;
116
- --pds-color-foreground-default-secondary: #a6a3b4;
117
- --pds-color-foreground-reverse: #1d1d29;
128
+ --pds-color-foreground-default-secondary: #b5b5bc;
129
+ --pds-color-foreground-reverse: #121219;
130
+ --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
131
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
132
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
133
+ --pds-color-icon-button-reverse-background-hover: #474954;
134
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
135
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
118
136
  --pds-color-input-checkbox-checked-foreground: #ffffff;
119
- --pds-color-input-file-upload-button-background-default: #504e62;
137
+ --pds-color-input-file-upload-button-background-default: #2f323d;
120
138
  --pds-color-input-file-upload-button-background-hover: #3d3c4d;
121
139
  --pds-color-input-switch-icon: #ffffff;
122
- --pds-color-interactive-background-active: #504e62;
123
- --pds-color-interactive-background-hover: #282839;
124
- --pds-color-interactive-focus: #36a3ff;
125
- --pds-color-interactive-link-active: #ad9bff;
126
- --pds-color-interactive-link-default: #36a3ff;
127
- --pds-color-interactive-link-hover: #8a70ff;
128
- --pds-color-interactive-link-visited: #8a70ff;
140
+ --pds-color-interactive-background-active: #2f323d;
141
+ --pds-color-interactive-background-hover: #20232c;
142
+ --pds-color-interactive-focus: #4888fe;
143
+ --pds-color-interactive-link-active: #836fdc;
144
+ --pds-color-interactive-link-default: #4888fe;
145
+ --pds-color-interactive-link-hover: #9584e1;
146
+ --pds-color-interactive-link-visited: #9584e1;
129
147
  --pds-color-interactive-reverse-focus: #0f62fe;
130
148
  --pds-color-interactive-reverse-link-active: #3017a1;
131
149
  --pds-color-interactive-reverse-link-default: #0f62fe;
132
150
  --pds-color-interactive-reverse-link-hover: #4f32ce;
133
151
  --pds-color-interactive-reverse-link-visited: #4f32ce;
134
- --pds-color-nav-item-default-foreground-active: #ad9bff;
135
- --pds-color-nav-item-default-foreground-hover: #ad9bff;
136
- --pds-color-nav-item-default-foreground-trigger: #a6a3b4;
137
- --pds-color-nav-item-reverse-foreground-active: #4e39a8;
138
- --pds-color-nav-item-reverse-foreground-hover: #4e39a8;
152
+ --pds-color-nav-item-default-foreground-active: #9786e2;
153
+ --pds-color-nav-item-default-foreground-hover: #9786e2;
154
+ --pds-color-nav-item-default-foreground-trigger: #6d6d78;
155
+ --pds-color-nav-item-reverse-foreground-active: #42318d;
156
+ --pds-color-nav-item-reverse-foreground-hover: #42318d;
139
157
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
140
- --pds-color-pagination-background-active: #2e1d78;
141
- --pds-color-pagination-background-hover: #4e39a8;
142
- --pds-color-pagination-foreground-active: #f3f0ff;
158
+ --pds-color-pagination-background-active: #2c205e;
159
+ --pds-color-pagination-background-hover: #42318d;
160
+ --pds-color-pagination-foreground-active: #eeebfa;
143
161
  --pds-color-pagination-foreground-hover: #ffffff;
162
+ --pds-color-panel-overlay-background: #1f2026;
163
+ --pds-color-panel-raised-background: #1f2026;
144
164
  --pds-color-panel-sunken-background: #121219;
145
165
  --pds-color-partner-bitbucket: #004dc0;
146
166
  --pds-color-partner-drupal: #009cde;
147
167
  --pds-color-partner-gatsby: #663399;
148
- --pds-color-partner-gitlab: #ffedfb;
149
- --pds-color-partner-nextjs: #000000;
168
+ --pds-color-partner-github: #2da44e;
169
+ --pds-color-partner-gitlab: #fc6d26;
170
+ --pds-color-partner-google: #4285f4;
171
+ --pds-color-partner-nextjs: #ffffff;
150
172
  --pds-color-partner-wordpress: #0073aa;
173
+ --pds-color-segmented-button-background-active: #121219;
174
+ --pds-color-segmented-button-background-default: #1a1b20;
175
+ --pds-color-segmented-button-background-hover: #121219;
176
+ --pds-color-segmented-button-border-active: #9786e2;
177
+ --pds-color-segmented-button-foreground-active: #9786e2;
178
+ --pds-color-segmented-button-foreground-default: #b5b5bc;
179
+ --pds-color-segmented-button-foreground-hover: #9786e2;
151
180
  --pds-color-social-rss: #f3763a;
152
- --pds-color-status-critical-background: #391813;
153
- --pds-color-status-critical-foreground: #ef5c48;
154
- --pds-color-status-discovery-background: #231c3f;
155
- --pds-color-status-discovery-foreground: #8f7ee7;
156
- --pds-color-status-info-background: #082145;
157
- --pds-color-status-info-foreground: #388bff;
158
- --pds-color-status-success-background: #133527;
159
- --pds-color-status-success-foreground: #2abb7f;
160
- --pds-color-status-warning-background: #3d2e00;
161
- --pds-color-status-warning-foreground: #cf9f02;
162
- --pds-color-tag-1-background: #ded8fa;
163
- --pds-color-tag-1-foreground: #5c4fac;
164
- --pds-color-tag-10-background: #d0dffc;
165
- --pds-color-tag-10-foreground: #2254c5;
166
- --pds-color-tag-11-background: #72cb9b;
167
- --pds-color-tag-11-foreground: #264a37;
168
- --pds-color-tag-12-background: #81c1dd;
169
- --pds-color-tag-12-foreground: #234453;
170
- --pds-color-tag-13-background: #689bf8;
171
- --pds-color-tag-13-foreground: #163168;
172
- --pds-color-tag-14-background: #9c90e9;
173
- --pds-color-tag-14-foreground: #342c60;
174
- --pds-color-tag-15-background: #e7796d;
175
- --pds-color-tag-15-foreground: #56231d;
176
- --pds-color-tag-16-background: #f1a76e;
177
- --pds-color-tag-16-foreground: #68320f;
178
- --pds-color-tag-17-background: #d87ab8;
179
- --pds-color-tag-17-foreground: #4a273e;
180
- --pds-color-tag-18-background: #efce60;
181
- --pds-color-tag-18-foreground: #504012;
182
- --pds-color-tag-19-background: #9fc65b;
183
- --pds-color-tag-19-foreground: #3f4d27;
184
- --pds-color-tag-2-background: #f8d7d3;
185
- --pds-color-tag-2-foreground: #a0392c;
186
- --pds-color-tag-20-background: #8790a0;
187
- --pds-color-tag-20-foreground: #0e1e40;
188
- --pds-color-tag-3-background: #f5e7a8;
189
- --pds-color-tag-3-foreground: #7b611e;
190
- --pds-color-tag-4-background: #f7d7ec;
191
- --pds-color-tag-4-foreground: #894271;
192
- --pds-color-tag-5-background: #d9f0af;
193
- --pds-color-tag-5-foreground: #536a2b;
194
- --pds-color-tag-6-background: #dddfe3;
195
- --pds-color-tag-6-foreground: #47546d;
196
- --pds-color-tag-7-background: #c6f1dc;
197
- --pds-color-tag-7-foreground: #3e7256;
198
- --pds-color-tag-8-background: #f9dfcb;
199
- --pds-color-tag-8-foreground: #9a4e1c;
200
- --pds-color-tag-9-background: #ceecf9;
201
- --pds-color-tag-9-foreground: #366880;
181
+ --pds-color-status-critical-background: #570000;
182
+ --pds-color-status-critical-foreground: #f9634c;
183
+ --pds-color-status-critical-utility: #a70000;
184
+ --pds-color-status-discovery-background: #321068;
185
+ --pds-color-status-discovery-foreground: #c08ffc;
186
+ --pds-color-status-discovery-utility: #a25ef6;
187
+ --pds-color-status-info-background: #002651;
188
+ --pds-color-status-info-foreground: #4096f3;
189
+ --pds-color-status-info-utility: #005cc8;
190
+ --pds-color-status-neutral-background: #6d6d78;
191
+ --pds-color-status-neutral-foreground: #ffffff;
192
+ --pds-color-status-neutral-utility: #b5b5bc;
193
+ --pds-color-status-success-background: #002f07;
194
+ --pds-color-status-success-foreground: #0dab25;
195
+ --pds-color-status-success-utility: #00710f;
196
+ --pds-color-status-warning-background: #481801;
197
+ --pds-color-status-warning-foreground: #ffa23b;
198
+ --pds-color-status-warning-utility: #bd5b00;
202
199
  --pds-color-text-default: #ffffff;
203
- --pds-color-text-default-secondary: #a6a3b4;
204
- --pds-color-text-reverse: #1d1d29;
205
- --pds-elevation-dropdown: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
206
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
207
- --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
200
+ --pds-color-text-default-secondary: #b5b5bc;
201
+ --pds-color-text-reverse: #121219;
202
+ --pds-color-tile-background: #1f2026;
203
+ --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
204
+ --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
205
+ --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
208
206
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -117,6 +117,7 @@
117
117
  --pds-color-button-subtle-foreground-active: #12026f;
118
118
  --pds-color-button-subtle-foreground-default: #4f32ce;
119
119
  --pds-color-button-subtle-foreground-hover: #3017a1;
120
+ --pds-color-card-background: #ffffff;
120
121
  --pds-color-code-block-dark-background: var(--pds-color-background-reverse);
121
122
  --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
122
123
  --pds-color-code-block-dark-highlight: #474954;
@@ -133,6 +134,7 @@
133
134
  --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
134
135
  --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
135
136
  --pds-color-dashboard-nav-item-background-hover: #e3e4e5;
137
+ --pds-color-dashboard-nav-item-background-hover-admin: #ffffff;
136
138
  --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
137
139
  --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
138
140
  --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
@@ -190,11 +192,11 @@
190
192
  --pds-color-interactive-link-default: #0f62fe;
191
193
  --pds-color-interactive-link-hover: #4f32ce;
192
194
  --pds-color-interactive-link-visited: #4f32ce;
193
- --pds-color-interactive-reverse-focus: #36a3ff;
194
- --pds-color-interactive-reverse-link-active: #ad9bff;
195
- --pds-color-interactive-reverse-link-default: #36a3ff;
196
- --pds-color-interactive-reverse-link-hover: #8a70ff;
197
- --pds-color-interactive-reverse-link-visited: #8a70ff;
195
+ --pds-color-interactive-reverse-focus: #4888fe;
196
+ --pds-color-interactive-reverse-link-active: #836fdc;
197
+ --pds-color-interactive-reverse-link-default: #4888fe;
198
+ --pds-color-interactive-reverse-link-hover: #9584e1;
199
+ --pds-color-interactive-reverse-link-visited: #9584e1;
198
200
  --pds-color-nav-item-default-foreground-active: #4f32ce;
199
201
  --pds-color-nav-item-default-foreground-hover: #4f32ce;
200
202
  --pds-color-nav-item-default-foreground-trigger: #6a6e7a;
@@ -212,18 +214,24 @@
212
214
  --pds-color-pagination-background-hover: var(--pds-color-brand-primary-100);
213
215
  --pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
214
216
  --pds-color-pagination-foreground-hover: var(--pds-color-interactive-link-hover);
217
+ --pds-color-panel-overlay-background: #ffffff;
218
+ --pds-color-panel-raised-background: #ffffff;
215
219
  --pds-color-panel-sunken-background: #f4f4f4;
216
220
  --pds-color-partner-bitbucket: #004dc0;
217
221
  --pds-color-partner-drupal: #009cde;
218
222
  --pds-color-partner-gatsby: #663399;
219
- --pds-color-partner-gitlab: #ffedfb;
223
+ --pds-color-partner-github: #2da44e;
224
+ --pds-color-partner-gitlab: #fc6d26;
225
+ --pds-color-partner-google: #4285f4;
220
226
  --pds-color-partner-nextjs: #000000;
221
227
  --pds-color-partner-wordpress: #0073aa;
222
228
  --pds-color-segmented-button-background-active: #f4f3fc;
223
229
  --pds-color-segmented-button-background-default: #ffffff;
230
+ --pds-color-segmented-button-background-hover: #f4f3fc;
224
231
  --pds-color-segmented-button-border-active: #4f32ce;
225
232
  --pds-color-segmented-button-foreground-active: #4f32ce;
226
233
  --pds-color-segmented-button-foreground-default: #6a6e7a;
234
+ --pds-color-segmented-button-foreground-hover: #4f32ce;
227
235
  --pds-color-social-rss: #f26522;
228
236
  --pds-color-status-critical-background: #ffefee;
229
237
  --pds-color-status-critical-foreground: #bc1c11;
@@ -255,12 +263,12 @@
255
263
  --pds-color-tag-13-foreground: #163168;
256
264
  --pds-color-tag-14-background: #9c90e9;
257
265
  --pds-color-tag-14-foreground: #342c60;
258
- --pds-color-tag-15-background: #e7796d;
259
- --pds-color-tag-15-foreground: #54221c;
266
+ --pds-color-tag-15-background: #e87e73;
267
+ --pds-color-tag-15-foreground: #50201b;
260
268
  --pds-color-tag-16-background: #f1a76e;
261
269
  --pds-color-tag-16-foreground: #68320f;
262
- --pds-color-tag-17-background: #d87ab8;
263
- --pds-color-tag-17-foreground: #49273e;
270
+ --pds-color-tag-17-background: #da81bc;
271
+ --pds-color-tag-17-foreground: #46253b;
264
272
  --pds-color-tag-18-background: #efce60;
265
273
  --pds-color-tag-18-foreground: #504012;
266
274
  --pds-color-tag-19-background: #9fc65b;
@@ -286,10 +294,8 @@
286
294
  --pds-color-text-default: #23232d;
287
295
  --pds-color-text-default-secondary: #6a6e7a;
288
296
  --pds-color-text-reverse: #ffffff;
289
- --pds-elevation-active: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
290
- --pds-elevation-card-default: var(--pds-elevation-raised);
291
- --pds-elevation-card-hover: var(--pds-elevation-active);
292
- --pds-elevation-dropdown: 0px 1px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
297
+ --pds-color-tile-background: #ffffff;
298
+ --pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
293
299
  --pds-elevation-overlay: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
294
300
  --pds-elevation-raised: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
295
301
  }
package/build/css/pds-design-tokens.css CHANGED
@@ -83,10 +83,17 @@
83
83
  --pds-spacing-xl: 1.563rem;
84
84
  --pds-spacing-xs: 0.64rem;
85
85
  --pds-typography-font-code: 'Source Code Pro', monospace;
86
+ --pds-typography-font-css-import: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap';
86
87
  --pds-typography-font-default: 'Poppins', sans-serif;
88
+ --pds-typography-font-headings: 'Poppins', sans-serif;
89
+ --pds-typography-font-lead: 'Aleo', serif;
90
+ --pds-typography-font-overline: 'Poppins', sans-serif;
91
+ --pds-typography-font-paragraph: 'Inter', sans-serif;
92
+ --pds-typography-font-quote: 'Aleo', serif;
87
93
  --pds-typography-font-secondary: 'Aleo', serif;
88
94
  --pds-typography-font-weight-bold: 700;
89
95
  --pds-typography-font-weight-light: 300;
96
+ --pds-typography-font-weight-medium: 500;
90
97
  --pds-typography-font-weight-regular: 400;
91
98
  --pds-typography-font-weight-semibold: 600;
92
99
  --pds-typography-letter-spacing-l: 0.04rem;