@pantheon-systems/pds-design-tokens 1.0.0-dev.136 → 1.0.0-dev.138

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 (6) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +16 -12
  2. package/build/css/pds-design-tokens-light-mode.css +47 -26
  3. package/build/figma/pds-design-tokens-figma.json +4011 -3803
  4. package/build/json/pds-design-tokens-dark-mode.json +573 -481
  5. package/build/json/pds-design-tokens-light-mode.json +617 -501
  6. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -59,7 +59,7 @@
59
59
  --pds-color-brand-accent-default: #de0093;
60
60
  --pds-color-brand-primary-default: #ffdc28;
61
61
  --pds-color-brand-secondary-default: #8a70ff;
62
- --pds-color-breadcrumb-link: var(--pds-color-link-default);
62
+ --pds-color-breadcrumb-link: var(--pds-color-interactive-link-default);
63
63
  --pds-color-breadcrumb-separator: #858299;
64
64
  --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
65
65
  --pds-color-button-brand-background-active: #ddbd16;
@@ -89,9 +89,9 @@
89
89
  --pds-color-button-critical-foreground-active: var(--pds-color-semantic-critical-foreground);
90
90
  --pds-color-button-critical-foreground-default: var(--pds-color-semantic-critical-foreground);
91
91
  --pds-color-button-critical-foreground-hover: var(--pds-color-semantic-critical-foreground);
92
- --pds-color-button-navbar-foreground-active: var(--pds-color-link-active);
92
+ --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
93
93
  --pds-color-button-navbar-foreground-default: #ffffff;
94
- --pds-color-button-navbar-foreground-hover: var(--pds-color-link-hover);
94
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
95
95
  --pds-color-button-primary-background-active: #4e39a8;
96
96
  --pds-color-button-primary-background-default: #8a70ff;
97
97
  --pds-color-button-primary-background-hover: #ad9bff;
@@ -112,9 +112,9 @@
112
112
  --pds-color-button-secondary-foreground-hover: #ffffff;
113
113
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
114
114
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
115
- --pds-color-button-subtle-foreground-active: var(--pds-color-link-active);
115
+ --pds-color-button-subtle-foreground-active: #8a70ff;
116
116
  --pds-color-button-subtle-foreground-default: #d0c6ff;
117
- --pds-color-button-subtle-foreground-hover: var(--pds-color-link-hover);
117
+ --pds-color-button-subtle-foreground-hover: #8a70ff;
118
118
  --pds-color-card-border: #504e62;
119
119
  --pds-color-code-inline-background: #282839;
120
120
  --pds-color-code-inline-border: #504e62;
@@ -145,6 +145,8 @@
145
145
  --pds-color-input-border-success: #2abb7f;
146
146
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
147
147
  --pds-color-input-checked-foreground: #ffffff;
148
+ --pds-color-input-file-upload-button-background-default: #504e62;
149
+ --pds-color-input-file-upload-button-background-hover: #3d3c4d;
148
150
  --pds-color-input-foreground-critical: #ef5c48;
149
151
  --pds-color-input-foreground-default: #ffffff;
150
152
  --pds-color-input-foreground-success: #2abb7f;
@@ -153,16 +155,18 @@
153
155
  --pds-color-input-toggle-switch-off: #504e62;
154
156
  --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
155
157
  --pds-color-interactive-focus: #36a3ff;
156
- --pds-color-interactive-link: #36a3ff;
157
- --pds-color-interactive-reverse-focus: #36a3ff;
158
- --pds-color-interactive-reverse-link: #36a3ff;
159
- --pds-color-link-active: #8a70ff;
158
+ --pds-color-interactive-link-active: #ad9bff;
159
+ --pds-color-interactive-link-default: #36a3ff;
160
+ --pds-color-interactive-link-hover: #8a70ff;
161
+ --pds-color-interactive-link-visited: #8a70ff;
162
+ --pds-color-interactive-reverse-focus: #0f62fe;
163
+ --pds-color-interactive-reverse-link-active: #3017a1;
164
+ --pds-color-interactive-reverse-link-default: #0f62fe;
165
+ --pds-color-interactive-reverse-link-hover: #654bd5;
166
+ --pds-color-interactive-reverse-link-visited: #654bd5;
160
167
  --pds-color-link-cta-active: #d0c6ff;
161
168
  --pds-color-link-cta-default: #8a70ff;
162
169
  --pds-color-link-cta-hover: #ad9bff;
163
- --pds-color-link-default: #36a3ff;
164
- --pds-color-link-hover: #8a70ff;
165
- --pds-color-link-visited: #8a70ff;
166
170
  --pds-color-menu-background: #282839;
167
171
  --pds-color-menu-item-background-active: #858299;
168
172
  --pds-color-menu-item-background-default: #282839;
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -56,10 +56,27 @@
56
56
  --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
57
57
  --pds-color-banner-warning-foreground: #23232d;
58
58
  --pds-color-border-default: rgba(0, 0, 0, 0.11);
59
+ --pds-color-brand-accent-100: #ffe5f6;
60
+ --pds-color-brand-accent-200: #ff99dc;
61
+ --pds-color-brand-accent-300: #ff4cc3;
62
+ --pds-color-brand-accent-400: #de0093;
63
+ --pds-color-brand-accent-500: #9a0066;
64
+ --pds-color-brand-accent-600: #560039;
59
65
  --pds-color-brand-accent-default: #de0093;
66
+ --pds-color-brand-primary-100: #fffbe9;
67
+ --pds-color-brand-primary-200: #fff1a9;
68
+ --pds-color-brand-primary-300: #ffe668;
69
+ --pds-color-brand-primary-400: #ffdc28;
70
+ --pds-color-brand-primary-500: #ddbd16;
71
+ --pds-color-brand-primary-600: #705e00;
60
72
  --pds-color-brand-primary-default: #ffdc28;
73
+ --pds-color-brand-secondary-100: #f0edfb;
74
+ --pds-color-brand-secondary-200: #dfd8f5;
75
+ --pds-color-brand-secondary-300: #5e45cf;
76
+ --pds-color-brand-secondary-400: #3017a1;
77
+ --pds-color-brand-secondary-500: #200c7f;
61
78
  --pds-color-brand-secondary-default: #3017a1;
62
- --pds-color-breadcrumb-link: var(--pds-color-link-default);
79
+ --pds-color-breadcrumb-link: var(--pds-color-interactive-link-default);
63
80
  --pds-color-breadcrumb-separator: #cfcfd3;
64
81
  --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
65
82
  --pds-color-button-brand-background-active: #ddbd16;
@@ -89,32 +106,32 @@
89
106
  --pds-color-button-critical-foreground-active: #b52f1d;
90
107
  --pds-color-button-critical-foreground-default: var(--pds-color-semantic-critical-foreground);
91
108
  --pds-color-button-critical-foreground-hover: var(--pds-color-semantic-critical-foreground);
92
- --pds-color-button-navbar-foreground-active: var(--pds-color-link-active);
109
+ --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
93
110
  --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
94
- --pds-color-button-navbar-foreground-hover: var(--pds-color-link-hover);
95
- --pds-color-button-primary-background-active: #1b0874;
96
- --pds-color-button-primary-background-default: #3017a1;
97
- --pds-color-button-primary-background-hover: #654bd5;
98
- --pds-color-button-primary-border-active: #1b0874;
111
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
112
+ --pds-color-button-primary-background-active: #200c7f;
113
+ --pds-color-button-primary-background-default: #5e45cf;
114
+ --pds-color-button-primary-background-hover: #5e45cf;
115
+ --pds-color-button-primary-border-active: #200c7f;
99
116
  --pds-color-button-primary-border-default: #3017a1;
100
- --pds-color-button-primary-border-hover: #654bd5;
117
+ --pds-color-button-primary-border-hover: #5e45cf;
101
118
  --pds-color-button-primary-foreground-active: #ffffff;
102
119
  --pds-color-button-primary-foreground-default: #ffffff;
103
120
  --pds-color-button-primary-foreground-hover: #ffffff;
104
121
  --pds-color-button-secondary-background-active: #dfd8f5;
105
122
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
106
123
  --pds-color-button-secondary-background-hover: #f0edfb;
107
- --pds-color-button-secondary-border-active: #1b0874;
124
+ --pds-color-button-secondary-border-active: #200c7f;
108
125
  --pds-color-button-secondary-border-default: #3017a1;
109
- --pds-color-button-secondary-border-hover: #654bd5;
110
- --pds-color-button-secondary-foreground-active: #1b0874;
126
+ --pds-color-button-secondary-border-hover: #5e45cf;
127
+ --pds-color-button-secondary-foreground-active: #200c7f;
111
128
  --pds-color-button-secondary-foreground-default: #3017a1;
112
129
  --pds-color-button-secondary-foreground-hover: #3017a1;
113
130
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
114
131
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
115
- --pds-color-button-subtle-foreground-active: #1b0874;
132
+ --pds-color-button-subtle-foreground-active: #200c7f;
116
133
  --pds-color-button-subtle-foreground-default: #3017a1;
117
- --pds-color-button-subtle-foreground-hover: #654bd5;
134
+ --pds-color-button-subtle-foreground-hover: #5e45cf;
118
135
  --pds-color-card-border: var(--pds-color-border-default);
119
136
  --pds-color-code-inline-background: #f0edfb;
120
137
  --pds-color-code-inline-border: #dfd8f5;
@@ -163,10 +180,12 @@
163
180
  --pds-color-input-background-hover: #f0edfb;
164
181
  --pds-color-input-border-critical: #ca3521;
165
182
  --pds-color-input-border-default: #cfcfd3;
166
- --pds-color-input-border-hover: #654bd5;
183
+ --pds-color-input-border-hover: #5e45cf;
167
184
  --pds-color-input-border-success: #218c5f;
168
185
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
169
186
  --pds-color-input-checked-foreground: #ffffff;
187
+ --pds-color-input-file-upload-button-background-default: #f1f1f1;
188
+ --pds-color-input-file-upload-button-background-hover: #e6e6e7;
170
189
  --pds-color-input-foreground-critical: #ca3521;
171
190
  --pds-color-input-foreground-default: #23232d;
172
191
  --pds-color-input-foreground-success: #218c5f;
@@ -175,17 +194,19 @@
175
194
  --pds-color-input-toggle-switch-off: #6d6d78;
176
195
  --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
177
196
  --pds-color-interactive-focus: #0f62fe;
178
- --pds-color-interactive-link: #0f62fe;
197
+ --pds-color-interactive-link-active: #3017a1;
198
+ --pds-color-interactive-link-default: #0f62fe;
199
+ --pds-color-interactive-link-hover: #5e45cf;
200
+ --pds-color-interactive-link-visited: #5e45cf;
179
201
  --pds-color-interactive-reverse-focus: #36a3ff;
180
- --pds-color-interactive-reverse-link: #36a3ff;
181
- --pds-color-link-active: #654bd5;
182
- --pds-color-link-cta-active: #1b0874;
202
+ --pds-color-interactive-reverse-link-active: #ad9bff;
203
+ --pds-color-interactive-reverse-link-default: #36a3ff;
204
+ --pds-color-interactive-reverse-link-hover: #8a70ff;
205
+ --pds-color-interactive-reverse-link-visited: #8a70ff;
206
+ --pds-color-link-cta-active: #200c7f;
183
207
  --pds-color-link-cta-default: #3017a1;
184
- --pds-color-link-cta-hover: #654bd5;
185
- --pds-color-link-default: #0f62fe;
186
- --pds-color-link-hover: #654bd5;
187
- --pds-color-link-visited: #654bd5;
188
- --pds-color-logo-carousel-background: #654bd5;
208
+ --pds-color-link-cta-hover: #5e45cf;
209
+ --pds-color-logo-carousel-background: #5e45cf;
189
210
  --pds-color-logo-carousel-foreground: var(--pds-color-foreground-reverse);
190
211
  --pds-color-menu-background: #ffffff;
191
212
  --pds-color-menu-item-background-active: #f1f1f1;
@@ -203,7 +224,7 @@
203
224
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
204
225
  --pds-color-pager-background-active: #f0edfb;
205
226
  --pds-color-pager-background-hover: #f1f1f1;
206
- --pds-color-pager-foreground-active: #654bd5;
227
+ --pds-color-pager-foreground-active: #5e45cf;
207
228
  --pds-color-panel-critical-border: #ca3521;
208
229
  --pds-color-panel-default-background: var(--pds-color-background-default);
209
230
  --pds-color-panel-default-border: var(--pds-color-border-default);
@@ -250,9 +271,9 @@
250
271
  --pds-color-strength-strong: #218c5f;
251
272
  --pds-color-strength-very-weak: #cfcfd3;
252
273
  --pds-color-strength-weak: #ca3521;
253
- --pds-color-table-sort-arrow-active: #654bd5;
274
+ --pds-color-table-sort-arrow-active: #5e45cf;
254
275
  --pds-color-table-sort-arrow-inactive: #cfcfd3;
255
- --pds-color-tabs-accent: #654bd5;
276
+ --pds-color-tabs-accent: #5e45cf;
256
277
  --pds-color-tag-1-background: #ded8fa;
257
278
  --pds-color-tag-1-foreground: #5c4fac;
258
279
  --pds-color-tag-10-background: #d0dffc;