@pantheon-systems/pds-design-tokens 1.0.0-dev.160 → 1.0.0-dev.162

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 +40 -27
  2. package/build/css/pds-design-tokens-light-mode.css +37 -24
  3. package/build/css/pds-design-tokens.css +4 -4
  4. package/build/figma/pds-design-tokens-figma.json +1157 -148
  5. package/build/json/pds-design-tokens-dark-mode.json +360 -67
  6. package/build/json/pds-design-tokens-light-mode.json +349 -56
  7. package/build/json/pds-design-tokens.json +10 -10
  8. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -9,10 +9,7 @@
9
9
  * This file has been generated automatically.
10
10
  */
11
11
 
12
- :root {
13
- --pds-color-background-default: #1a1b20;
14
- --pds-color-background-default-secondary: #121219;
15
- --pds-color-background-reverse: #b5b5bc;
12
+ [data-theme="dark"] {
16
13
  --pds-color-badge-indicator-brand-background: #745dd8;
17
14
  --pds-color-badge-indicator-brand-foreground: #ffffff;
18
15
  --pds-color-badge-indicator-critical-background: #a70000;
@@ -27,7 +24,7 @@
27
24
  --pds-color-badge-indicator-neutral-foreground: #ffffff;
28
25
  --pds-color-badge-indicator-platinum-background: #cbc2f0;
29
26
  --pds-color-badge-indicator-platinum-foreground: #42318d;
30
- --pds-color-badge-indicator-silver-background: #b5b5bc;
27
+ --pds-color-badge-indicator-silver-background: #e7e7eb;
31
28
  --pds-color-badge-indicator-silver-foreground: #2f323d;
32
29
  --pds-color-badge-indicator-success-background: #00710f;
33
30
  --pds-color-badge-indicator-success-foreground: #ffffff;
@@ -39,10 +36,21 @@
39
36
  --pds-color-banner-info-foreground: #ffffff;
40
37
  --pds-color-banner-warning-background: #bd5b00;
41
38
  --pds-color-banner-warning-foreground: #ffffff;
39
+ --pds-color-bg-critical: var(--pds-color-status-critical-background);
40
+ --pds-color-bg-default: #1a1b20;
41
+ --pds-color-bg-default-secondary: #121219;
42
+ --pds-color-bg-discovery: var(--pds-color-status-discovery-background);
43
+ --pds-color-bg-info: var(--pds-color-status-info-background);
44
+ --pds-color-bg-reverse: #e7e7eb;
45
+ --pds-color-bg-success: var(--pds-color-status-success-background);
46
+ --pds-color-bg-transparent: rgba(0, 0, 0, 0);
47
+ --pds-color-bg-warning: var(--pds-color-status-warning-background);
42
48
  --pds-color-border-brand: #9786e2;
49
+ --pds-color-border-critical: var(--pds-color-status-critical-foreground);
43
50
  --pds-color-border-default: #6d6d78;
44
51
  --pds-color-border-input: #6d6d78;
45
52
  --pds-color-border-separator: #6d6d78;
53
+ --pds-color-border-success: var(--pds-color-status-success-foreground);
46
54
  --pds-color-brand-accent-default: #de0093;
47
55
  --pds-color-brand-primary-default: #745dd8;
48
56
  --pds-color-brand-secondary-default: #ffdc28;
@@ -61,8 +69,8 @@
61
69
  --pds-color-button-brand-secondary-border-active: #20232c;
62
70
  --pds-color-button-brand-secondary-border-default: #6d6d78;
63
71
  --pds-color-button-brand-secondary-border-hover: #ffffff;
64
- --pds-color-button-brand-secondary-foreground-active: #b5b5bc;
65
- --pds-color-button-brand-secondary-foreground-default: #b5b5bc;
72
+ --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
73
+ --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
66
74
  --pds-color-button-brand-secondary-foreground-hover: #ffffff;
67
75
  --pds-color-button-critical-background-active: #e00000;
68
76
  --pds-color-button-critical-background-default: var(--pds-color-status-critical-utility);
@@ -91,8 +99,8 @@
91
99
  --pds-color-button-secondary-border-active: #20232c;
92
100
  --pds-color-button-secondary-border-default: #6d6d78;
93
101
  --pds-color-button-secondary-border-hover: #ffffff;
94
- --pds-color-button-secondary-foreground-active: #b5b5bc;
95
- --pds-color-button-secondary-foreground-default: #b5b5bc;
102
+ --pds-color-button-secondary-foreground-active: #e7e7eb;
103
+ --pds-color-button-secondary-foreground-default: #e7e7eb;
96
104
  --pds-color-button-secondary-foreground-hover: #ffffff;
97
105
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
98
106
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
@@ -103,30 +111,35 @@
103
111
  --pds-color-code-inline-background: #1a1b20;
104
112
  --pds-color-code-inline-border: #20232c;
105
113
  --pds-color-code-inline-text: #ffffff;
106
- --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
114
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
107
115
  --pds-color-dashboard-nav-background-admin: #252038;
108
- --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
116
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
109
117
  --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
110
118
  --pds-color-dashboard-nav-item-background-hover: #6d6d78;
111
119
  --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);
120
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
121
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
122
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
123
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
124
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
117
125
  --pds-color-dropdown-background: #20232c;
118
- --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
119
- --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
120
- --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
126
+ --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
127
+ --pds-color-dropdown-foreground: var(--pds-color-fg-default);
128
+ --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
121
129
  --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
122
130
  --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
123
131
  --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
124
132
  --pds-color-dropdown-top-border: rgba(0, 0, 0, 0);
125
133
  --pds-color-expansion-panel-hover: #20232c;
126
134
  --pds-color-expansion-panel-open: #20232c;
127
- --pds-color-foreground-default: #ffffff;
128
- --pds-color-foreground-default-secondary: #b5b5bc;
129
- --pds-color-foreground-reverse: #121219;
135
+ --pds-color-fg-critical: var(--pds-color-status-critical-foreground);
136
+ --pds-color-fg-default: #ffffff;
137
+ --pds-color-fg-default-secondary: #e7e7eb;
138
+ --pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
139
+ --pds-color-fg-info: var(--pds-color-status-info-foreground);
140
+ --pds-color-fg-reverse: #121219;
141
+ --pds-color-fg-success: var(--pds-color-status-success-foreground);
142
+ --pds-color-fg-warning: var(--pds-color-status-warning-foreground);
130
143
  --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
131
144
  --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
132
145
  --pds-color-icon-button-reverse-background-active: #6a6e7a;
@@ -175,7 +188,7 @@
175
188
  --pds-color-segmented-button-background-hover: #121219;
176
189
  --pds-color-segmented-button-border-active: #9786e2;
177
190
  --pds-color-segmented-button-foreground-active: #9786e2;
178
- --pds-color-segmented-button-foreground-default: #b5b5bc;
191
+ --pds-color-segmented-button-foreground-default: #e7e7eb;
179
192
  --pds-color-segmented-button-foreground-hover: #9786e2;
180
193
  --pds-color-social-rss: #f3763a;
181
194
  --pds-color-status-critical-background: #570000;
@@ -189,16 +202,16 @@
189
202
  --pds-color-status-info-utility: #005cc8;
190
203
  --pds-color-status-neutral-background: #6d6d78;
191
204
  --pds-color-status-neutral-foreground: #ffffff;
192
- --pds-color-status-neutral-utility: #b5b5bc;
205
+ --pds-color-status-neutral-utility: #e7e7eb;
193
206
  --pds-color-status-success-background: #002f07;
194
207
  --pds-color-status-success-foreground: #0dab25;
195
208
  --pds-color-status-success-utility: #00710f;
196
209
  --pds-color-status-warning-background: #481801;
197
210
  --pds-color-status-warning-foreground: #ffa23b;
198
211
  --pds-color-status-warning-utility: #bd5b00;
199
- --pds-color-text-default: #ffffff;
200
- --pds-color-text-default-secondary: #b5b5bc;
201
- --pds-color-text-reverse: #121219;
212
+ --pds-color-text-default: var(--pds-color-fg-default);
213
+ --pds-color-text-default-secondary: var(--pds-color-fg-default-secondary);
214
+ --pds-color-text-reverse: var(--pds-color-fg-reverse);
202
215
  --pds-color-tile-background: #1f2026;
203
216
  --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
204
217
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -9,10 +9,7 @@
9
9
  * This file has been generated automatically.
10
10
  */
11
11
 
12
- :root {
13
- --pds-color-background-default: #ffffff;
14
- --pds-color-background-default-secondary: #f4f4f4;
15
- --pds-color-background-reverse: #23232d;
12
+ :root, [data-theme="light"] {
16
13
  --pds-color-badge-indicator-brand-background: #4f32ce;
17
14
  --pds-color-badge-indicator-brand-foreground: #ffffff;
18
15
  --pds-color-badge-indicator-critical-background: #bc1c11;
@@ -39,10 +36,21 @@
39
36
  --pds-color-banner-info-foreground: #ffffff;
40
37
  --pds-color-banner-warning-background: #ffa126;
41
38
  --pds-color-banner-warning-foreground: #23232d;
39
+ --pds-color-bg-critical: var(--pds-color-status-critical-background);
40
+ --pds-color-bg-default: #ffffff;
41
+ --pds-color-bg-default-secondary: #f4f4f4;
42
+ --pds-color-bg-discovery: var(--pds-color-status-discovery-background);
43
+ --pds-color-bg-info: var(--pds-color-status-info-background);
44
+ --pds-color-bg-reverse: #23232d;
45
+ --pds-color-bg-success: var(--pds-color-status-success-background);
46
+ --pds-color-bg-transparent: rgba(0, 0, 0, 0);
47
+ --pds-color-bg-warning: var(--pds-color-status-warning-background);
42
48
  --pds-color-border-brand: #e5e0f8;
49
+ --pds-color-border-critical: var(--pds-color-status-critical-foreground);
43
50
  --pds-color-border-default: #e3e4e5;
44
51
  --pds-color-border-input: #c3c5c9;
45
52
  --pds-color-border-separator: #c3c5c9;
53
+ --pds-color-border-success: var(--pds-color-status-success-foreground);
46
54
  --pds-color-brand-accent-100: #ffe5f6;
47
55
  --pds-color-brand-accent-200: #ff99dc;
48
56
  --pds-color-brand-accent-300: #ff4cc3;
@@ -101,7 +109,7 @@
101
109
  --pds-color-button-critical-secondary-foreground-default: var(--pds-color-status-critical-foreground);
102
110
  --pds-color-button-critical-secondary-foreground-hover: var(--pds-color-status-critical-foreground);
103
111
  --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
104
- --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
112
+ --pds-color-button-navbar-foreground-default: var(--pds-color-fg-default);
105
113
  --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
106
114
  --pds-color-button-primary-background-active: #12026f;
107
115
  --pds-color-button-primary-background-default: #4f32ce;
@@ -127,8 +135,8 @@
127
135
  --pds-color-button-subtle-foreground-default: #4f32ce;
128
136
  --pds-color-button-subtle-foreground-hover: #3017a1;
129
137
  --pds-color-card-background: #ffffff;
130
- --pds-color-code-block-dark-background: var(--pds-color-background-reverse);
131
- --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
138
+ --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
139
+ --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
132
140
  --pds-color-code-block-dark-highlight: #474954;
133
141
  --pds-color-code-block-dark-line-prefix: #9699a1;
134
142
  --pds-color-code-block-light-background: #eff0f0;
@@ -138,35 +146,40 @@
138
146
  --pds-color-code-inline-background: #f4f3fc;
139
147
  --pds-color-code-inline-border: #e5e0f8;
140
148
  --pds-color-code-inline-text: #000000;
141
- --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
149
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
142
150
  --pds-color-dashboard-nav-background-admin: #edecf8;
143
- --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
151
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
144
152
  --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
145
153
  --pds-color-dashboard-nav-item-background-hover: #e3e4e5;
146
154
  --pds-color-dashboard-nav-item-background-hover-admin: #ffffff;
147
- --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
148
- --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
149
- --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
150
- --pds-color-dashboard-toggle-button-background: var(--pds-color-background-reverse);
151
- --pds-color-dashboard-toggle-button-foreground: var(--pds-color-foreground-reverse);
155
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
156
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
157
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
158
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
159
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
152
160
  --pds-color-datavis-1: #003f5c;
153
161
  --pds-color-datavis-2: #006779;
154
162
  --pds-color-datavis-3: #008d6f;
155
163
  --pds-color-datavis-4: #62ad43;
156
164
  --pds-color-datavis-5: #ddbd16;
157
- --pds-color-dropdown-background: var(--pds-color-background-default);
158
- --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
159
- --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
160
- --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
165
+ --pds-color-dropdown-background: var(--pds-color-bg-default);
166
+ --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
167
+ --pds-color-dropdown-foreground: var(--pds-color-fg-default);
168
+ --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
161
169
  --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
162
170
  --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
163
171
  --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
164
172
  --pds-color-dropdown-top-border: #dfdfdf;
165
173
  --pds-color-expansion-panel-hover: #f4f4f4;
166
174
  --pds-color-expansion-panel-open: #f4f4f4;
167
- --pds-color-foreground-default: #23232d;
168
- --pds-color-foreground-default-secondary: #6a6e7a;
169
- --pds-color-foreground-reverse: #ffffff;
175
+ --pds-color-fg-critical: var(--pds-color-status-critical-foreground);
176
+ --pds-color-fg-default: #23232d;
177
+ --pds-color-fg-default-secondary: #6a6e7a;
178
+ --pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
179
+ --pds-color-fg-info: var(--pds-color-status-info-foreground);
180
+ --pds-color-fg-reverse: #ffffff;
181
+ --pds-color-fg-success: var(--pds-color-status-success-foreground);
182
+ --pds-color-fg-warning: var(--pds-color-status-warning-foreground);
170
183
  --pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
171
184
  --pds-color-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
172
185
  --pds-color-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
@@ -305,9 +318,9 @@
305
318
  --pds-color-tag-8-foreground: #9a4e1c;
306
319
  --pds-color-tag-9-background: #ceecf9;
307
320
  --pds-color-tag-9-foreground: #366880;
308
- --pds-color-text-default: #23232d;
309
- --pds-color-text-default-secondary: #6a6e7a;
310
- --pds-color-text-reverse: #ffffff;
321
+ --pds-color-text-default: var(--pds-color-fg-default);
322
+ --pds-color-text-default-secondary: var(--pds-color-fg-default-secondary);
323
+ --pds-color-text-reverse: var(--pds-color-fg-reverse);
311
324
  --pds-color-tile-background: #ffffff;
312
325
  --pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
313
326
  --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);
package/build/css/pds-design-tokens.css CHANGED
@@ -38,10 +38,10 @@
38
38
  --pds-container-max-width-standard: 1200px;
39
39
  --pds-container-max-width-wide: 1440px;
40
40
  --pds-container-max-width-x-wide: 1600px;
41
- --pds-container-modal-width-large: 44rem;
42
- --pds-container-modal-width-medium: 36rem;
43
- --pds-container-modal-width-small: 25rem;
44
- --pds-container-modal-width-xl: 60rem;
41
+ --pds-container-modal-width-large: 60rem;
42
+ --pds-container-modal-width-medium: 44rem;
43
+ --pds-container-modal-width-small: 32rem;
44
+ --pds-container-modal-width-xl: 80rem;
45
45
  --pds-container-padding-base: var(--pds-spacing-xl);
46
46
  --pds-container-padding-narrow-bp-lg: 20%;
47
47
  --pds-container-padding-narrow-bp-md: 12%;