@pantheon-systems/pds-design-tokens 1.1.2 → 2.0.0-alpha.0

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 (17) hide show
  1. package/README.md +137 -18
  2. package/build/css/variables.compact.css +17 -0
  3. package/build/css/variables.dark.css +226 -0
  4. package/build/css/variables.expanded.css +17 -0
  5. package/build/css/variables.global.css +83 -0
  6. package/build/css/variables.light.css +248 -0
  7. package/build/figma/tokens.json +11482 -0
  8. package/build/js/variables.js +109 -0
  9. package/build/json/tokens.json +1892 -0
  10. package/package.json +12 -3
  11. package/build/css/pds-design-tokens-dark-mode.css +0 -226
  12. package/build/css/pds-design-tokens-light-mode.css +0 -335
  13. package/build/css/pds-design-tokens.css +0 -130
  14. package/build/figma/pds-design-tokens-figma.json +0 -19481
  15. package/build/json/pds-design-tokens-dark-mode.json +0 -6424
  16. package/build/json/pds-design-tokens-light-mode.json +0 -8906
  17. package/build/json/pds-design-tokens.json +0 -2850
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
3
  "description": "Design Tokens for the Pantheon Design System",
4
- "version": "1.1.2",
4
+ "version": "2.0.0-alpha.0",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",
8
8
  "provenance": false
9
9
  },
10
+ "type": "module",
10
11
  "homepage": "https://pantheon.io",
11
12
  "keywords": [
12
13
  "Pantheon",
@@ -18,7 +19,12 @@
18
19
  "build"
19
20
  ],
20
21
  "scripts": {
21
- "build:tokens": "node ./scripts/build-custom.js && node ./scripts/build-custom-figma.js"
22
+ "build:tokens": "style-dictionary build && node scripts/prepare-for-figma.js",
23
+ "build:tokens:watch": "nodemon --watch tokens --exec 'npm run build:tokens'",
24
+ "clean": "rm -rf build/",
25
+ "prebuild:tokens": "npm run clean",
26
+ "validate:mappings": "node codemods/v1-to-v2/validate.js",
27
+ "generate:migration": "node codemods/v1-to-v2/generate-migration-guide.js"
22
28
  },
23
29
  "repository": {
24
30
  "type": "git",
@@ -30,7 +36,10 @@
30
36
  "url": "https://github.com/pantheon-systems/pds-design-tokens/issues"
31
37
  },
32
38
  "devDependencies": {
39
+ "culori": "^4.0.2",
40
+ "glob": "^11.0.3",
41
+ "nodemon": "^3.1.10",
33
42
  "prettier": "^2.8.3",
34
- "style-dictionary": "^3.7.2"
43
+ "style-dictionary": "^5.0.4"
35
44
  }
36
45
  }
package/build/css/pds-design-tokens-dark-mode.css DELETED
@@ -1,226 +0,0 @@
1
- /**
2
- *
3
- * Pantheon Systems
4
- *
5
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
- * !! DO NOT EDIT THIS FILE DIRECTLY !!
7
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
- *
9
- * This file has been generated automatically.
10
- */
11
-
12
- [data-theme="dark"] {
13
- --pds-color-badge-indicator-brand-background: #745dd8;
14
- --pds-color-badge-indicator-brand-foreground: #ffffff;
15
- --pds-color-badge-indicator-critical-background: #a70000;
16
- --pds-color-badge-indicator-critical-foreground: #ffffff;
17
- --pds-color-badge-indicator-default-background: #e7e7eb;
18
- --pds-color-badge-indicator-default-foreground: #121219;
19
- --pds-color-badge-indicator-diamond-background: #d3e7fd;
20
- --pds-color-badge-indicator-diamond-foreground: #005cc8;
21
- --pds-color-badge-indicator-gold-background: #ffe668;
22
- --pds-color-badge-indicator-gold-foreground: #705e00;
23
- --pds-color-badge-indicator-info-background: #005cc8;
24
- --pds-color-badge-indicator-info-foreground: #ffffff;
25
- --pds-color-badge-indicator-neutral-background: #6d6d78;
26
- --pds-color-badge-indicator-neutral-foreground: #ffffff;
27
- --pds-color-badge-indicator-platinum-background: #cbc2f0;
28
- --pds-color-badge-indicator-platinum-foreground: #42318d;
29
- --pds-color-badge-indicator-silver-background: #e7e7eb;
30
- --pds-color-badge-indicator-silver-foreground: #2f323d;
31
- --pds-color-badge-indicator-success-background: #00710f;
32
- --pds-color-badge-indicator-success-foreground: #ffffff;
33
- --pds-color-badge-indicator-warning-background: #bd5b00;
34
- --pds-color-badge-indicator-warning-foreground: #ffffff;
35
- --pds-color-banner-critical-background: #a70000;
36
- --pds-color-banner-critical-foreground: #ffffff;
37
- --pds-color-banner-info-background: #005cc8;
38
- --pds-color-banner-info-foreground: #ffffff;
39
- --pds-color-banner-warning-background: #bd5b00;
40
- --pds-color-banner-warning-foreground: #ffffff;
41
- --pds-color-bg-critical: var(--pds-color-status-critical-background);
42
- --pds-color-bg-default: #1a1b20;
43
- --pds-color-bg-default-secondary: #121219;
44
- --pds-color-bg-discovery: var(--pds-color-status-discovery-background);
45
- --pds-color-bg-info: var(--pds-color-status-info-background);
46
- --pds-color-bg-reverse: #e7e7eb;
47
- --pds-color-bg-success: var(--pds-color-status-success-background);
48
- --pds-color-bg-transparent: rgba(0, 0, 0, 0);
49
- --pds-color-bg-warning: var(--pds-color-status-warning-background);
50
- --pds-color-border-brand: #9786e2;
51
- --pds-color-border-critical: var(--pds-color-status-critical-foreground);
52
- --pds-color-border-default: #6d6d78;
53
- --pds-color-border-input: #6d6d78;
54
- --pds-color-border-separator: #6d6d78;
55
- --pds-color-border-success: var(--pds-color-status-success-foreground);
56
- --pds-color-brand-accent-default: #de0093;
57
- --pds-color-brand-primary-default: #745dd8;
58
- --pds-color-brand-secondary-default: #ffdc28;
59
- --pds-color-button-brand-background-active: #ffe668;
60
- --pds-color-button-brand-background-default: #ddbd16;
61
- --pds-color-button-brand-background-hover: #ffdc28;
62
- --pds-color-button-brand-border-active: #ffe668;
63
- --pds-color-button-brand-border-default: #ddbd16;
64
- --pds-color-button-brand-border-hover: #ffdc28;
65
- --pds-color-button-brand-foreground-active: #121219;
66
- --pds-color-button-brand-foreground-default: #121219;
67
- --pds-color-button-brand-foreground-hover: #121219;
68
- --pds-color-button-brand-secondary-background-active: #1a1b20;
69
- --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
70
- --pds-color-button-brand-secondary-background-hover: #20232c;
71
- --pds-color-button-brand-secondary-border-active: #20232c;
72
- --pds-color-button-brand-secondary-border-default: #6d6d78;
73
- --pds-color-button-brand-secondary-border-hover: #ffffff;
74
- --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
75
- --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
76
- --pds-color-button-brand-secondary-foreground-hover: #ffffff;
77
- --pds-color-button-critical-background-active: #e00000;
78
- --pds-color-button-critical-background-default: var(--pds-color-status-critical-utility);
79
- --pds-color-button-critical-background-hover: #c70000;
80
- --pds-color-button-critical-border-active: #e00000;
81
- --pds-color-button-critical-border-default: var(--pds-color-status-critical-utility);
82
- --pds-color-button-critical-border-hover: #c70000;
83
- --pds-color-button-critical-foreground-active: #ffffff;
84
- --pds-color-button-critical-foreground-default: #ffffff;
85
- --pds-color-button-critical-foreground-hover: #ffffff;
86
- --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
87
- --pds-color-button-navbar-foreground-default: #ffffff;
88
- --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
89
- --pds-color-button-primary-background-active: #8a78de;
90
- --pds-color-button-primary-background-default: #42318d;
91
- --pds-color-button-primary-background-hover: #745dd8;
92
- --pds-color-button-primary-border-active: #8a78de;
93
- --pds-color-button-primary-border-default: #42318d;
94
- --pds-color-button-primary-border-hover: #745dd8;
95
- --pds-color-button-primary-foreground-active: #ffffff;
96
- --pds-color-button-primary-foreground-default: #ffffff;
97
- --pds-color-button-primary-foreground-hover: #ffffff;
98
- --pds-color-button-secondary-background-active: #1a1b20;
99
- --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
100
- --pds-color-button-secondary-background-hover: #20232c;
101
- --pds-color-button-secondary-border-active: #20232c;
102
- --pds-color-button-secondary-border-default: #6d6d78;
103
- --pds-color-button-secondary-border-hover: #ffffff;
104
- --pds-color-button-secondary-foreground-active: #e7e7eb;
105
- --pds-color-button-secondary-foreground-default: #e7e7eb;
106
- --pds-color-button-secondary-foreground-hover: #ffffff;
107
- --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
108
- --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
109
- --pds-color-button-subtle-foreground-active: #745dd8;
110
- --pds-color-button-subtle-foreground-default: #cbc2f0;
111
- --pds-color-button-subtle-foreground-hover: #745dd8;
112
- --pds-color-card-background: #1f2026;
113
- --pds-color-code-inline-background: #1a1b20;
114
- --pds-color-code-inline-border: #20232c;
115
- --pds-color-code-inline-text: #ffffff;
116
- --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
117
- --pds-color-dashboard-nav-background-admin: #252038;
118
- --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
119
- --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
120
- --pds-color-dashboard-nav-item-background-hover: #6d6d78;
121
- --pds-color-dashboard-nav-item-background-hover-admin: #121219;
122
- --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
123
- --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
124
- --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
125
- --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
126
- --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
127
- --pds-color-datepicker-accent-foreground: #745dd8;
128
- --pds-color-datepicker-range-background: #2c205e;
129
- --pds-color-datepicker-range-foreground: #ffffff;
130
- --pds-color-datepicker-selected-background: #745dd8;
131
- --pds-color-datepicker-selected-foreground: #ffffff;
132
- --pds-color-dropdown-background: #20232c;
133
- --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
134
- --pds-color-dropdown-foreground: var(--pds-color-fg-default);
135
- --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
136
- --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
137
- --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
138
- --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
139
- --pds-color-dropdown-top-border: rgba(0, 0, 0, 0);
140
- --pds-color-expansion-panel-hover: #20232c;
141
- --pds-color-expansion-panel-open: #20232c;
142
- --pds-color-fg-critical: var(--pds-color-status-critical-foreground);
143
- --pds-color-fg-default: #ffffff;
144
- --pds-color-fg-default-secondary: #e7e7eb;
145
- --pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
146
- --pds-color-fg-info: var(--pds-color-status-info-foreground);
147
- --pds-color-fg-reverse: #121219;
148
- --pds-color-fg-success: var(--pds-color-status-success-foreground);
149
- --pds-color-fg-warning: var(--pds-color-status-warning-foreground);
150
- --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
151
- --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
152
- --pds-color-icon-button-reverse-background-active: #6a6e7a;
153
- --pds-color-icon-button-reverse-background-hover: #474954;
154
- --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
155
- --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
156
- --pds-color-input-checkbox-checked-foreground: #ffffff;
157
- --pds-color-input-file-upload-button-background-default: #2f323d;
158
- --pds-color-input-file-upload-button-background-hover: #3d3c4d;
159
- --pds-color-input-switch-icon: #ffffff;
160
- --pds-color-interactive-background-active: #2f323d;
161
- --pds-color-interactive-background-hover: #20232c;
162
- --pds-color-interactive-focus: #4888fe;
163
- --pds-color-interactive-link-active: #836fdc;
164
- --pds-color-interactive-link-default: #4888fe;
165
- --pds-color-interactive-link-hover: #9584e1;
166
- --pds-color-interactive-link-visited: #9584e1;
167
- --pds-color-interactive-reverse-focus: #0f62fe;
168
- --pds-color-interactive-reverse-link-active: #3017a1;
169
- --pds-color-interactive-reverse-link-default: #0f62fe;
170
- --pds-color-interactive-reverse-link-hover: #4f32ce;
171
- --pds-color-interactive-reverse-link-visited: #4f32ce;
172
- --pds-color-nav-item-default-foreground-active: #9786e2;
173
- --pds-color-nav-item-default-foreground-hover: #9786e2;
174
- --pds-color-nav-item-default-foreground-trigger: #6d6d78;
175
- --pds-color-nav-item-reverse-foreground-active: #42318d;
176
- --pds-color-nav-item-reverse-foreground-hover: #42318d;
177
- --pds-color-overlay: rgba(9, 0, 48, 0.45);
178
- --pds-color-pagination-background-active: #2c205e;
179
- --pds-color-pagination-background-hover: #42318d;
180
- --pds-color-pagination-foreground-active: #eeebfa;
181
- --pds-color-pagination-foreground-hover: #ffffff;
182
- --pds-color-panel-overlay-background: #1f2026;
183
- --pds-color-panel-raised-background: #1f2026;
184
- --pds-color-panel-sunken-background: #121219;
185
- --pds-color-partner-bitbucket: #004dc0;
186
- --pds-color-partner-drupal: #009cde;
187
- --pds-color-partner-gatsby: #663399;
188
- --pds-color-partner-github: #2da44e;
189
- --pds-color-partner-gitlab: #fc6d26;
190
- --pds-color-partner-google: #4285f4;
191
- --pds-color-partner-nextjs: #ffffff;
192
- --pds-color-partner-wordpress: #0073aa;
193
- --pds-color-segmented-button-background-active: #121219;
194
- --pds-color-segmented-button-background-default: #1a1b20;
195
- --pds-color-segmented-button-background-hover: #121219;
196
- --pds-color-segmented-button-border-active: #9786e2;
197
- --pds-color-segmented-button-foreground-active: #9786e2;
198
- --pds-color-segmented-button-foreground-default: #e7e7eb;
199
- --pds-color-segmented-button-foreground-hover: #9786e2;
200
- --pds-color-social-rss: #f3763a;
201
- --pds-color-status-critical-background: #570000;
202
- --pds-color-status-critical-foreground: #f9634c;
203
- --pds-color-status-critical-utility: #a70000;
204
- --pds-color-status-discovery-background: #321068;
205
- --pds-color-status-discovery-foreground: #c08ffc;
206
- --pds-color-status-discovery-utility: #a25ef6;
207
- --pds-color-status-info-background: #002651;
208
- --pds-color-status-info-foreground: #4096f3;
209
- --pds-color-status-info-utility: #005cc8;
210
- --pds-color-status-neutral-background: #6d6d78;
211
- --pds-color-status-neutral-foreground: #ffffff;
212
- --pds-color-status-neutral-utility: #e7e7eb;
213
- --pds-color-status-success-background: #002f07;
214
- --pds-color-status-success-foreground: #0dab25;
215
- --pds-color-status-success-utility: #00710f;
216
- --pds-color-status-warning-background: #481801;
217
- --pds-color-status-warning-foreground: #ffa23b;
218
- --pds-color-status-warning-utility: #bd5b00;
219
- --pds-color-text-default: var(--pds-color-fg-default);
220
- --pds-color-text-default-secondary: var(--pds-color-fg-default-secondary);
221
- --pds-color-text-reverse: var(--pds-color-fg-reverse);
222
- --pds-color-tile-background: #1f2026;
223
- --pds-elevation-dashboard: 1px 1px 6px -2px rgba(80, 80, 80, 0.2), 1px 1px 0px 0px #1a1b20;
224
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
225
- --pds-elevation-raised: 0px 3px 5px 0px rgba(18, 18, 25, 0.6), 0px 0px 0px 1px rgba(120, 120, 120, 0.15);
226
- }
package/build/css/pds-design-tokens-light-mode.css DELETED
@@ -1,335 +0,0 @@
1
- /**
2
- *
3
- * Pantheon Systems
4
- *
5
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
- * !! DO NOT EDIT THIS FILE DIRECTLY !!
7
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
- *
9
- * This file has been generated automatically.
10
- */
11
-
12
- :root, [data-theme="light"] {
13
- --pds-color-badge-indicator-brand-background: #4f32ce;
14
- --pds-color-badge-indicator-brand-foreground: #ffffff;
15
- --pds-color-badge-indicator-critical-background: #bc1c11;
16
- --pds-color-badge-indicator-critical-foreground: #ffffff;
17
- --pds-color-badge-indicator-default-background: #23232d;
18
- --pds-color-badge-indicator-default-foreground: #ffffff;
19
- --pds-color-badge-indicator-diamond-background: #d7edff;
20
- --pds-color-badge-indicator-diamond-foreground: #0766c5;
21
- --pds-color-badge-indicator-gold-background: #ffe668;
22
- --pds-color-badge-indicator-gold-foreground: #726009;
23
- --pds-color-badge-indicator-info-background: #0875e1;
24
- --pds-color-badge-indicator-info-foreground: #ffffff;
25
- --pds-color-badge-indicator-neutral-background: #6a6e7a;
26
- --pds-color-badge-indicator-neutral-foreground: #ffffff;
27
- --pds-color-badge-indicator-platinum-background: #e5e0f8;
28
- --pds-color-badge-indicator-platinum-foreground: #4f32ce;
29
- --pds-color-badge-indicator-silver-background: #c3c5c9;
30
- --pds-color-badge-indicator-silver-foreground: #23232d;
31
- --pds-color-badge-indicator-success-background: #217a37;
32
- --pds-color-badge-indicator-success-foreground: #ffffff;
33
- --pds-color-badge-indicator-warning-background: #b06300;
34
- --pds-color-badge-indicator-warning-foreground: #ffffff;
35
- --pds-color-banner-critical-background: #de2e21;
36
- --pds-color-banner-critical-foreground: #ffffff;
37
- --pds-color-banner-info-background: #0875e1;
38
- --pds-color-banner-info-foreground: #ffffff;
39
- --pds-color-banner-warning-background: #ffa126;
40
- --pds-color-banner-warning-foreground: #23232d;
41
- --pds-color-bg-critical: var(--pds-color-status-critical-background);
42
- --pds-color-bg-default: #ffffff;
43
- --pds-color-bg-default-secondary: #f4f4f4;
44
- --pds-color-bg-discovery: var(--pds-color-status-discovery-background);
45
- --pds-color-bg-info: var(--pds-color-status-info-background);
46
- --pds-color-bg-reverse: #23232d;
47
- --pds-color-bg-success: var(--pds-color-status-success-background);
48
- --pds-color-bg-transparent: rgba(0, 0, 0, 0);
49
- --pds-color-bg-warning: var(--pds-color-status-warning-background);
50
- --pds-color-border-brand: #e5e0f8;
51
- --pds-color-border-critical: var(--pds-color-status-critical-foreground);
52
- --pds-color-border-default: #e3e4e5;
53
- --pds-color-border-input: #c3c5c9;
54
- --pds-color-border-separator: #c3c5c9;
55
- --pds-color-border-success: var(--pds-color-status-success-foreground);
56
- --pds-color-brand-accent-100: #ffe5f6;
57
- --pds-color-brand-accent-200: #ff99dc;
58
- --pds-color-brand-accent-300: #ff4cc3;
59
- --pds-color-brand-accent-400: #de0093;
60
- --pds-color-brand-accent-500: #9a0066;
61
- --pds-color-brand-accent-600: #560039;
62
- --pds-color-brand-accent-default: #de0093;
63
- --pds-color-brand-primary-100: #f4f3fc;
64
- --pds-color-brand-primary-200: #e5e0f8;
65
- --pds-color-brand-primary-300: #cbc2f0;
66
- --pds-color-brand-primary-400: #4f32ce;
67
- --pds-color-brand-primary-500: #3017a1;
68
- --pds-color-brand-primary-600: #12026f;
69
- --pds-color-brand-primary-default: #4f32ce;
70
- --pds-color-brand-secondary-100: #fffbe9;
71
- --pds-color-brand-secondary-200: #fff1a9;
72
- --pds-color-brand-secondary-300: #ffe668;
73
- --pds-color-brand-secondary-400: #ffdc28;
74
- --pds-color-brand-secondary-500: #ddbd16;
75
- --pds-color-brand-secondary-600: #726009;
76
- --pds-color-brand-secondary-default: #ffdc28;
77
- --pds-color-button-brand-background-active: #a88f10;
78
- --pds-color-button-brand-background-default: #ffdc28;
79
- --pds-color-button-brand-background-hover: #ddbd16;
80
- --pds-color-button-brand-border-active: #a88f10;
81
- --pds-color-button-brand-border-default: #ffdc28;
82
- --pds-color-button-brand-border-hover: #ddbd16;
83
- --pds-color-button-brand-foreground-active: #23232d;
84
- --pds-color-button-brand-foreground-default: #23232d;
85
- --pds-color-button-brand-foreground-hover: #23232d;
86
- --pds-color-button-brand-secondary-background-active: #e3e4e5;
87
- --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
88
- --pds-color-button-brand-secondary-background-hover: #f4f4f4;
89
- --pds-color-button-brand-secondary-border-active: #23232d;
90
- --pds-color-button-brand-secondary-border-default: #6a6e7a;
91
- --pds-color-button-brand-secondary-border-hover: #23232d;
92
- --pds-color-button-brand-secondary-foreground-active: #23232d;
93
- --pds-color-button-brand-secondary-foreground-default: #23232d;
94
- --pds-color-button-brand-secondary-foreground-hover: #23232d;
95
- --pds-color-button-critical-background-active: #790b03;
96
- --pds-color-button-critical-background-default: var(--pds-color-status-critical-foreground);
97
- --pds-color-button-critical-background-hover: #9e140b;
98
- --pds-color-button-critical-border-active: #790b03;
99
- --pds-color-button-critical-border-default: var(--pds-color-status-critical-foreground);
100
- --pds-color-button-critical-border-hover: #9e140b;
101
- --pds-color-button-critical-foreground-active: #ffffff;
102
- --pds-color-button-critical-foreground-default: #ffffff;
103
- --pds-color-button-critical-foreground-hover: #ffffff;
104
- --pds-color-button-critical-secondary-background-active: #ffdcd8;
105
- --pds-color-button-critical-secondary-background-default: rgba(0, 0, 0, 0);
106
- --pds-color-button-critical-secondary-background-hover: var(--pds-color-status-critical-background);
107
- --pds-color-button-critical-secondary-border-active: var(--pds-color-button-critical-border-active);
108
- --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
109
- --pds-color-button-critical-secondary-border-hover: var(--pds-color-button-critical-border-hover);
110
- --pds-color-button-critical-secondary-foreground-active: var(--pds-color-status-critical-foreground);
111
- --pds-color-button-critical-secondary-foreground-default: var(--pds-color-status-critical-foreground);
112
- --pds-color-button-critical-secondary-foreground-hover: var(--pds-color-status-critical-foreground);
113
- --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
114
- --pds-color-button-navbar-foreground-default: var(--pds-color-fg-default);
115
- --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
116
- --pds-color-button-primary-background-active: #12026f;
117
- --pds-color-button-primary-background-default: #4f32ce;
118
- --pds-color-button-primary-background-hover: #3017a1;
119
- --pds-color-button-primary-border-active: #12026f;
120
- --pds-color-button-primary-border-default: #4f32ce;
121
- --pds-color-button-primary-border-hover: #3017a1;
122
- --pds-color-button-primary-foreground-active: #ffffff;
123
- --pds-color-button-primary-foreground-default: #ffffff;
124
- --pds-color-button-primary-foreground-hover: #ffffff;
125
- --pds-color-button-secondary-background-active: #f4f3fc;
126
- --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
127
- --pds-color-button-secondary-background-hover: #f4f3fc;
128
- --pds-color-button-secondary-border-active: #3017a1;
129
- --pds-color-button-secondary-border-default: #4f32ce;
130
- --pds-color-button-secondary-border-hover: #4f32ce;
131
- --pds-color-button-secondary-foreground-active: #3017a1;
132
- --pds-color-button-secondary-foreground-default: #4f32ce;
133
- --pds-color-button-secondary-foreground-hover: #4f32ce;
134
- --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
135
- --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
136
- --pds-color-button-subtle-foreground-active: #12026f;
137
- --pds-color-button-subtle-foreground-default: #4f32ce;
138
- --pds-color-button-subtle-foreground-hover: #3017a1;
139
- --pds-color-card-background: #ffffff;
140
- --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
141
- --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
142
- --pds-color-code-block-dark-highlight: #474954;
143
- --pds-color-code-block-dark-line-prefix: #9699a1;
144
- --pds-color-code-block-light-background: #eff0f0;
145
- --pds-color-code-block-light-foreground: #3b3d45;
146
- --pds-color-code-block-light-highlight: #dedfe0;
147
- --pds-color-code-block-light-line-prefix: #686d78;
148
- --pds-color-code-inline-background: #f4f3fc;
149
- --pds-color-code-inline-border: #e5e0f8;
150
- --pds-color-code-inline-text: #000000;
151
- --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
152
- --pds-color-dashboard-nav-background-admin: #edecf8;
153
- --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
154
- --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
155
- --pds-color-dashboard-nav-item-background-hover: #e3e4e5;
156
- --pds-color-dashboard-nav-item-background-hover-admin: #ffffff;
157
- --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
158
- --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
159
- --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
160
- --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
161
- --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
162
- --pds-color-datavis-1: #003f5c;
163
- --pds-color-datavis-2: #006779;
164
- --pds-color-datavis-3: #008d6f;
165
- --pds-color-datavis-4: #62ad43;
166
- --pds-color-datavis-5: #ddbd16;
167
- --pds-color-datepicker-accent-foreground: #4f32ce;
168
- --pds-color-datepicker-range-background: #f4f3fc;
169
- --pds-color-datepicker-range-foreground: #000000;
170
- --pds-color-datepicker-selected-background: #4f32ce;
171
- --pds-color-datepicker-selected-foreground: #ffffff;
172
- --pds-color-dropdown-background: var(--pds-color-bg-default);
173
- --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
174
- --pds-color-dropdown-foreground: var(--pds-color-fg-default);
175
- --pds-color-dropdown-heading: var(--pds-color-fg-default-secondary);
176
- --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
177
- --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
178
- --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
179
- --pds-color-dropdown-top-border: #dfdfdf;
180
- --pds-color-expansion-panel-hover: #f4f4f4;
181
- --pds-color-expansion-panel-open: #f4f4f4;
182
- --pds-color-fg-critical: var(--pds-color-status-critical-foreground);
183
- --pds-color-fg-default: #23232d;
184
- --pds-color-fg-default-secondary: #6a6e7a;
185
- --pds-color-fg-discovery: var(--pds-color-status-discovery-foreground);
186
- --pds-color-fg-info: var(--pds-color-status-info-foreground);
187
- --pds-color-fg-reverse: #ffffff;
188
- --pds-color-fg-success: var(--pds-color-status-success-foreground);
189
- --pds-color-fg-warning: var(--pds-color-status-warning-foreground);
190
- --pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
191
- --pds-color-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
192
- --pds-color-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
193
- --pds-color-gradient-avatar-earth: linear-gradient(315deg, #6BC5FC 0%, #218C5F 100%);
194
- --pds-color-gradient-avatar-fall: linear-gradient(135deg, #CC36C9 0%, #FFFF11 100%);
195
- --pds-color-gradient-avatar-grape: linear-gradient(315deg, #DE0093 0%, #5F41E5 100%);
196
- --pds-color-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
197
- --pds-color-gradient-avatar-moon: linear-gradient(315deg, #A2CFFF 0%, #8A70FF 100%);
198
- --pds-color-gradient-avatar-plum: linear-gradient(135deg, #000006 0%, #782EA9 76.76%);
199
- --pds-color-gradient-avatar-spring: linear-gradient(315deg, #FFDC28 0%, #218C5F 100%);
200
- --pds-color-gradient-avatar-summer: linear-gradient(135deg, #FF00C5 0%, #F09737 100%);
201
- --pds-color-gradient-avatar-sun: linear-gradient(135deg, #E65F35 0%, #FFFF11 100%);
202
- --pds-color-gradient-avatar-sundown: linear-gradient(135deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
203
- --pds-color-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
204
- --pds-color-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
205
- --pds-color-gradient-avatar-winter: linear-gradient(315deg, #FFDC28 0%, #5F41E5 100%);
206
- --pds-color-gradient-card-fog: linear-gradient(45deg, #EAD7D3 0%, #A2DCFF 100%);
207
- --pds-color-gradient-card-lavender: linear-gradient(225deg, #8A70FF 0%, #BFB1FF 100%);
208
- --pds-color-gradient-card-mint: linear-gradient(225deg, #4BCE97 0%, #BAF3DB 100%);
209
- --pds-color-gradient-card-royal: linear-gradient(225deg, #3017A1 0%, #8A70FF 100%);
210
- --pds-color-gradient-card-sundown: linear-gradient(225deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
211
- --pds-color-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
212
- --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
213
- --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
214
- --pds-color-icon-button-reverse-background-active: #6a6e7a;
215
- --pds-color-icon-button-reverse-background-hover: #474954;
216
- --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
217
- --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
218
- --pds-color-input-checkbox-checked-foreground: #ffffff;
219
- --pds-color-input-file-upload-button-background-default: #f4f4f4;
220
- --pds-color-input-file-upload-button-background-hover: #e3e4e5;
221
- --pds-color-input-switch-icon: #ffffff;
222
- --pds-color-interactive-background-active: #e3e4e5;
223
- --pds-color-interactive-background-hover: #f4f4f4;
224
- --pds-color-interactive-focus: #0f62fe;
225
- --pds-color-interactive-link-active: #3017a1;
226
- --pds-color-interactive-link-default: #0f62fe;
227
- --pds-color-interactive-link-hover: #4f32ce;
228
- --pds-color-interactive-link-visited: #4f32ce;
229
- --pds-color-interactive-reverse-focus: #4888fe;
230
- --pds-color-interactive-reverse-link-active: #836fdc;
231
- --pds-color-interactive-reverse-link-default: #4888fe;
232
- --pds-color-interactive-reverse-link-hover: #9584e1;
233
- --pds-color-interactive-reverse-link-visited: #9584e1;
234
- --pds-color-nav-item-default-foreground-active: #4f32ce;
235
- --pds-color-nav-item-default-foreground-hover: #4f32ce;
236
- --pds-color-nav-item-default-foreground-trigger: #6a6e7a;
237
- --pds-color-nav-item-reverse-foreground-active: #e5e0f8;
238
- --pds-color-nav-item-reverse-foreground-hover: #e5e0f8;
239
- --pds-color-neutral-000: #ffffff;
240
- --pds-color-neutral-100: #f4f4f4;
241
- --pds-color-neutral-200: #e3e4e5;
242
- --pds-color-neutral-300: #c3c5c9;
243
- --pds-color-neutral-400: #6a6e7a;
244
- --pds-color-neutral-500: #23232d;
245
- --pds-color-neutral-600: #000000;
246
- --pds-color-overlay: rgba(9, 0, 48, 0.45);
247
- --pds-color-pagination-background-active: #e5e0f8;
248
- --pds-color-pagination-background-hover: var(--pds-color-brand-primary-100);
249
- --pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
250
- --pds-color-pagination-foreground-hover: var(--pds-color-interactive-link-hover);
251
- --pds-color-panel-overlay-background: #ffffff;
252
- --pds-color-panel-raised-background: #ffffff;
253
- --pds-color-panel-sunken-background: #f4f4f4;
254
- --pds-color-partner-bitbucket: #004dc0;
255
- --pds-color-partner-drupal: #009cde;
256
- --pds-color-partner-gatsby: #663399;
257
- --pds-color-partner-github: #2da44e;
258
- --pds-color-partner-gitlab: #fc6d26;
259
- --pds-color-partner-google: #4285f4;
260
- --pds-color-partner-nextjs: #000000;
261
- --pds-color-partner-wordpress: #0073aa;
262
- --pds-color-segmented-button-background-active: #f4f3fc;
263
- --pds-color-segmented-button-background-default: #ffffff;
264
- --pds-color-segmented-button-background-hover: #f4f3fc;
265
- --pds-color-segmented-button-border-active: #4f32ce;
266
- --pds-color-segmented-button-foreground-active: #4f32ce;
267
- --pds-color-segmented-button-foreground-default: #6a6e7a;
268
- --pds-color-segmented-button-foreground-hover: #4f32ce;
269
- --pds-color-social-rss: #f26522;
270
- --pds-color-status-critical-background: #ffefee;
271
- --pds-color-status-critical-foreground: #bc1c11;
272
- --pds-color-status-critical-utility: #de2e21;
273
- --pds-color-status-discovery-background: #f0edff;
274
- --pds-color-status-discovery-foreground: #8e74ff;
275
- --pds-color-status-discovery-utility: #cfc5ff;
276
- --pds-color-status-info-background: #d7edff;
277
- --pds-color-status-info-foreground: #0875e1;
278
- --pds-color-status-info-utility: #a6d2ff;
279
- --pds-color-status-neutral-background: #c3c5c9;
280
- --pds-color-status-neutral-foreground: #23232d;
281
- --pds-color-status-neutral-utility: #6a6e7a;
282
- --pds-color-status-success-background: #ebfff0;
283
- --pds-color-status-success-foreground: #217a37;
284
- --pds-color-status-success-utility: #43c463;
285
- --pds-color-status-warning-background: #ffeed9;
286
- --pds-color-status-warning-foreground: #b06300;
287
- --pds-color-status-warning-utility: #ffa126;
288
- --pds-color-tag-1-background: #ded8fa;
289
- --pds-color-tag-1-foreground: #5c4fac;
290
- --pds-color-tag-10-background: #d0dffc;
291
- --pds-color-tag-10-foreground: #2254c5;
292
- --pds-color-tag-11-background: #72cb9b;
293
- --pds-color-tag-11-foreground: #264a37;
294
- --pds-color-tag-12-background: #81c1dd;
295
- --pds-color-tag-12-foreground: #234453;
296
- --pds-color-tag-13-background: #689bf8;
297
- --pds-color-tag-13-foreground: #163168;
298
- --pds-color-tag-14-background: #9c90e9;
299
- --pds-color-tag-14-foreground: #342c60;
300
- --pds-color-tag-15-background: #e87e73;
301
- --pds-color-tag-15-foreground: #50201b;
302
- --pds-color-tag-16-background: #f1a76e;
303
- --pds-color-tag-16-foreground: #68320f;
304
- --pds-color-tag-17-background: #da81bc;
305
- --pds-color-tag-17-foreground: #46253b;
306
- --pds-color-tag-18-background: #efce60;
307
- --pds-color-tag-18-foreground: #504012;
308
- --pds-color-tag-19-background: #9fc65b;
309
- --pds-color-tag-19-foreground: #3f4d27;
310
- --pds-color-tag-2-background: #f8d7d3;
311
- --pds-color-tag-2-foreground: #a0392c;
312
- --pds-color-tag-20-background: #8790a0;
313
- --pds-color-tag-20-foreground: #0e1e40;
314
- --pds-color-tag-3-background: #f5e7a8;
315
- --pds-color-tag-3-foreground: #7b611e;
316
- --pds-color-tag-4-background: #f7d7ec;
317
- --pds-color-tag-4-foreground: #894271;
318
- --pds-color-tag-5-background: #d9f0af;
319
- --pds-color-tag-5-foreground: #536a2b;
320
- --pds-color-tag-6-background: #dddfe3;
321
- --pds-color-tag-6-foreground: #47546d;
322
- --pds-color-tag-7-background: #c6f1dc;
323
- --pds-color-tag-7-foreground: #3e7256;
324
- --pds-color-tag-8-background: #f9dfcb;
325
- --pds-color-tag-8-foreground: #9a4e1c;
326
- --pds-color-tag-9-background: #ceecf9;
327
- --pds-color-tag-9-foreground: #366880;
328
- --pds-color-text-default: var(--pds-color-fg-default);
329
- --pds-color-text-default-secondary: var(--pds-color-fg-default-secondary);
330
- --pds-color-text-reverse: var(--pds-color-fg-reverse);
331
- --pds-color-tile-background: #ffffff;
332
- --pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
333
- --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);
334
- --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);
335
- }