@pantheon-systems/pds-design-tokens 1.0.0-dev.15 → 1.0.0-dev.151

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 (12) hide show
  1. package/README.md +2 -3
  2. package/build/css/pds-design-tokens-dark-mode.css +163 -63
  3. package/build/css/pds-design-tokens-light-mode.css +265 -78
  4. package/build/css/pds-design-tokens.css +102 -0
  5. package/build/figma/pds-design-tokens-figma.json +13064 -5119
  6. package/build/json/pds-design-tokens-dark-mode.json +3909 -1890
  7. package/build/json/pds-design-tokens-light-mode.json +5961 -1909
  8. package/build/json/pds-design-tokens.json +2045 -472
  9. package/package.json +1 -1
  10. package/build/scss/_pds-design-tokens-dark-mode.scss +0 -105
  11. package/build/scss/_pds-design-tokens-light-mode.scss +0 -105
  12. package/build/scss/_pds-design-tokens.scss +0 -17
package/README.md CHANGED
@@ -11,7 +11,6 @@ Compiled tokens can be found in the `build` directory.
11
11
  PDS Design Tokens are provided in the following formats:
12
12
 
13
13
  - CSS Custom Properties
14
- - SASS Variables
15
14
  - JSON
16
15
  - Figma (formatted to sync to Figma styles)
17
16
 
@@ -21,11 +20,11 @@ Design tokens are specifically intended for the purpose of design and will be tr
21
20
 
22
21
  By default, tokens values should be unitless unless that unit is universal (such as percentages). Many PDS design tokens will be assigned a default unit type under the hood, but those unit designations will only be provided for the output formats where appropriate.
23
22
 
24
- For example, CSS and SCSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
23
+ For example, CSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
25
24
 
26
25
  ## Public and Private Tokens
27
26
 
28
- All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS and SCSS stylesheets.
27
+ All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS stylesheets.
29
28
 
30
29
  We typically only designate tokens as public when they need to be available to override for theming purposes such as switching between light and dark mode or for other custom themes.
31
30
 
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -10,11 +10,42 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-color-background-default: #1d1d29;
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;
17
+ --pds-color-badge-indicator-brand-foreground: #ffffff;
18
+ --pds-color-badge-indicator-critical-background: #ef5c48;
19
+ --pds-color-badge-indicator-critical-foreground: #ffffff;
20
+ --pds-color-badge-indicator-diamond-background: #f0fdff;
21
+ --pds-color-badge-indicator-diamond-foreground: #388bff;
22
+ --pds-color-badge-indicator-gold-background: #ffe668;
23
+ --pds-color-badge-indicator-gold-foreground: #705e00;
24
+ --pds-color-badge-indicator-info-background: #388bff;
25
+ --pds-color-badge-indicator-info-foreground: #ffffff;
26
+ --pds-color-badge-indicator-neutral-background: #504e62;
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;
33
+ --pds-color-badge-indicator-success-foreground: #ffffff;
34
+ --pds-color-badge-indicator-warning-background: #cf9f02;
35
+ --pds-color-badge-indicator-warning-foreground: #ffffff;
36
+ --pds-color-banner-critical-background: #d34431;
37
+ --pds-color-banner-critical-foreground: #ffffff;
38
+ --pds-color-banner-info-background: #3575d0;
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;
14
43
  --pds-color-border-default: #504e62;
44
+ --pds-color-border-input: #858299;
45
+ --pds-color-border-separator: #858299;
15
46
  --pds-color-brand-accent-default: #de0093;
16
- --pds-color-brand-primary-default: #ffdc28;
17
- --pds-color-brand-secondary-default: #6947ff;
47
+ --pds-color-brand-primary-default: #8a70ff;
48
+ --pds-color-brand-secondary-default: #ffdc28;
18
49
  --pds-color-button-brand-background-active: #ddbd16;
19
50
  --pds-color-button-brand-background-default: #ffdc28;
20
51
  --pds-color-button-brand-background-hover: #ffe668;
@@ -24,21 +55,33 @@
24
55
  --pds-color-button-brand-foreground-active: #121219;
25
56
  --pds-color-button-brand-foreground-default: #121219;
26
57
  --pds-color-button-brand-foreground-hover: #121219;
27
- --pds-color-button-critical-background-active: #9c2f2f;
28
- --pds-color-button-critical-background-default: #e05757;
29
- --pds-color-button-critical-background-hover: #be4242;
30
- --pds-color-button-critical-border-active: #9c2f2f;
31
- --pds-color-button-critical-border-default: #e05757;
32
- --pds-color-button-critical-border-hover: #be4242;
33
- --pds-color-button-critical-foreground-active: #ffffff;
34
- --pds-color-button-critical-foreground-default: #ffffff;
35
- --pds-color-button-critical-foreground-hover: #ffffff;
36
- --pds-color-button-primary-background-active: #4b32bb;
37
- --pds-color-button-primary-background-default: #6947ff;
38
- --pds-color-button-primary-background-hover: #7657ff;
39
- --pds-color-button-primary-border-active: #4b32bb;
40
- --pds-color-button-primary-border-default: #6947ff;
41
- --pds-color-button-primary-border-hover: #7657ff;
58
+ --pds-color-button-brand-secondary-background-active: #282839;
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;
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;
66
+ --pds-color-button-brand-secondary-foreground-hover: #ffffff;
67
+ --pds-color-button-critical-background-active: #4b2d28;
68
+ --pds-color-button-critical-background-default: var(--pds-color-background-default);
69
+ --pds-color-button-critical-background-hover: var(--pds-color-status-critical-background);
70
+ --pds-color-button-critical-border-active: var(--pds-color-status-critical-foreground);
71
+ --pds-color-button-critical-border-default: var(--pds-color-status-critical-foreground);
72
+ --pds-color-button-critical-border-hover: var(--pds-color-status-critical-foreground);
73
+ --pds-color-button-critical-foreground-active: var(--pds-color-status-critical-foreground);
74
+ --pds-color-button-critical-foreground-default: var(--pds-color-status-critical-foreground);
75
+ --pds-color-button-critical-foreground-hover: var(--pds-color-status-critical-foreground);
76
+ --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
77
+ --pds-color-button-navbar-foreground-default: #ffffff;
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;
42
85
  --pds-color-button-primary-foreground-active: #ffffff;
43
86
  --pds-color-button-primary-foreground-default: #ffffff;
44
87
  --pds-color-button-primary-foreground-hover: #ffffff;
@@ -51,58 +94,115 @@
51
94
  --pds-color-button-secondary-foreground-active: #e7e7eb;
52
95
  --pds-color-button-secondary-foreground-default: #e7e7eb;
53
96
  --pds-color-button-secondary-foreground-hover: #ffffff;
54
- --pds-color-button-subtle-background-active: #282839;
55
97
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
- --pds-color-button-subtle-background-hover: #504e62;
57
98
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
58
- --pds-color-button-subtle-foreground-active: #e7e7eb;
59
- --pds-color-button-subtle-foreground-default: #e7e7eb;
60
- --pds-color-button-subtle-foreground-hover: #ffffff;
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;
104
+ --pds-color-code-inline-text: #ffffff;
105
+ --pds-color-dropdown-background: var(--pds-color-background-default-secondary);
106
+ --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
107
+ --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
108
+ --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
109
+ --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
110
+ --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
111
+ --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;
61
115
  --pds-color-foreground-default: #ffffff;
62
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
66
- --pds-color-input-background-critical: #1d1d29;
67
- --pds-color-input-background-default: #1d1d29;
68
- --pds-color-input-background-hover: #282839;
69
- --pds-color-input-border-critical: #e05757;
70
- --pds-color-input-border-default: #a6a3b4;
71
- --pds-color-input-border-hover: #5f41e5;
72
- --pds-color-input-border-success: #3cb683;
73
- --pds-color-input-checked-background: var(--pds-color-interactive-focus);
74
- --pds-color-input-checked-foreground: #ffffff;
75
- --pds-color-input-foreground-critical: #e05757;
76
- --pds-color-input-foreground-default: #ffffff;
77
- --pds-color-input-foreground-success: #3cb683;
78
- --pds-color-input-placeholder-text: #a6a3b4;
116
+ --pds-color-foreground-default-secondary: #a6a3b4;
117
+ --pds-color-foreground-reverse: #1d1d29;
118
+ --pds-color-input-checkbox-checked-foreground: #ffffff;
119
+ --pds-color-input-file-upload-button-background-default: #504e62;
120
+ --pds-color-input-file-upload-button-background-hover: #3d3c4d;
121
+ --pds-color-input-switch-icon: #ffffff;
122
+ --pds-color-interactive-background-active: #504e62;
123
+ --pds-color-interactive-background-hover: #282839;
79
124
  --pds-color-interactive-focus: #36a3ff;
80
- --pds-color-link-active: #5f41e5;
81
- --pds-color-link-default: #36a3ff;
82
- --pds-color-link-hover: #5f41e5;
83
- --pds-color-link-visited: #5f41e5;
84
- --pds-color-menu-background: #282839;
85
- --pds-color-menu-item-background-active: #858299;
86
- --pds-color-menu-item-background-default: #282839;
87
- --pds-color-menu-item-background-hover: #504e62;
88
- --pds-color-menu-item-description-text: #a6a3b4;
89
- --pds-color-menu-item-foreground: #ffffff;
90
- --pds-color-menu-item-heading-text: #a6a3b4;
91
- --pds-color-panel-default-background: var(--pds-color-background-default);
92
- --pds-color-panel-default-border: var(--pds-color-border-default);
93
- --pds-color-panel-overlay-background: #282839;
94
- --pds-color-panel-overlay-border: #282839;
95
- --pds-color-panel-raised-background: #282839;
96
- --pds-color-panel-raised-border: var(--pds-color-border-default);
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;
129
+ --pds-color-interactive-reverse-focus: #0f62fe;
130
+ --pds-color-interactive-reverse-link-active: #3017a1;
131
+ --pds-color-interactive-reverse-link-default: #0f62fe;
132
+ --pds-color-interactive-reverse-link-hover: #4f32ce;
133
+ --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;
139
+ --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;
143
+ --pds-color-pagination-foreground-hover: #ffffff;
97
144
  --pds-color-panel-sunken-background: #121219;
98
- --pds-color-panel-sunken-border: #121219;
145
+ --pds-color-partner-bitbucket: #004dc0;
146
+ --pds-color-partner-drupal: #009cde;
147
+ --pds-color-partner-gatsby: #663399;
148
+ --pds-color-partner-gitlab: #ffedfb;
149
+ --pds-color-partner-nextjs: #000000;
150
+ --pds-color-partner-wordpress: #0073aa;
151
+ --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;
99
202
  --pds-color-text-default: #ffffff;
100
203
  --pds-color-text-default-secondary: #a6a3b4;
101
- --pds-color-text-headings: var(--pds-color-text-default);
102
- --pds-color-text-lead: var(--pds-color-text-default-secondary);
103
- --pds-color-text-overline: var(--pds-color-text-default-secondary);
104
- --pds-color-text-paragraph: var(--pds-color-text-default);
105
- --pds-color-text-quote: var(--pds-color-text-default-secondary);
204
+ --pds-color-text-reverse: #1d1d29;
205
+ --pds-elevation-dropdown: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
106
206
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
107
207
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
108
208
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -11,98 +11,285 @@
11
11
 
12
12
  :root {
13
13
  --pds-color-background-default: #ffffff;
14
- --pds-color-border-default: #cfcfd3;
14
+ --pds-color-background-default-secondary: #f4f4f4;
15
+ --pds-color-background-reverse: #23232d;
16
+ --pds-color-badge-indicator-brand-background: #4f32ce;
17
+ --pds-color-badge-indicator-brand-foreground: #ffffff;
18
+ --pds-color-badge-indicator-critical-background: #bc1c11;
19
+ --pds-color-badge-indicator-critical-foreground: #ffffff;
20
+ --pds-color-badge-indicator-diamond-background: #d7edff;
21
+ --pds-color-badge-indicator-diamond-foreground: #0766c5;
22
+ --pds-color-badge-indicator-gold-background: #ffe668;
23
+ --pds-color-badge-indicator-gold-foreground: #726009;
24
+ --pds-color-badge-indicator-info-background: #0875e1;
25
+ --pds-color-badge-indicator-info-foreground: #ffffff;
26
+ --pds-color-badge-indicator-neutral-background: #6a6e7a;
27
+ --pds-color-badge-indicator-neutral-foreground: #ffffff;
28
+ --pds-color-badge-indicator-platinum-background: #e5e0f8;
29
+ --pds-color-badge-indicator-platinum-foreground: #4f32ce;
30
+ --pds-color-badge-indicator-silver-background: #c3c5c9;
31
+ --pds-color-badge-indicator-silver-foreground: #23232d;
32
+ --pds-color-badge-indicator-success-background: #217a37;
33
+ --pds-color-badge-indicator-success-foreground: #ffffff;
34
+ --pds-color-badge-indicator-warning-background: #b06300;
35
+ --pds-color-badge-indicator-warning-foreground: #ffffff;
36
+ --pds-color-banner-critical-background: #de2e21;
37
+ --pds-color-banner-critical-foreground: #ffffff;
38
+ --pds-color-banner-info-background: #0875e1;
39
+ --pds-color-banner-info-foreground: #ffffff;
40
+ --pds-color-banner-warning-background: #ffa126;
41
+ --pds-color-banner-warning-foreground: #23232d;
42
+ --pds-color-border-brand: #e5e0f8;
43
+ --pds-color-border-default: #e3e4e5;
44
+ --pds-color-border-input: #c3c5c9;
45
+ --pds-color-border-separator: #c3c5c9;
46
+ --pds-color-brand-accent-100: #ffe5f6;
47
+ --pds-color-brand-accent-200: #ff99dc;
48
+ --pds-color-brand-accent-300: #ff4cc3;
49
+ --pds-color-brand-accent-400: #de0093;
50
+ --pds-color-brand-accent-500: #9a0066;
51
+ --pds-color-brand-accent-600: #560039;
15
52
  --pds-color-brand-accent-default: #de0093;
16
- --pds-color-brand-primary-default: #ffdc28;
17
- --pds-color-brand-secondary-default: #3017a1;
18
- --pds-color-button-brand-background-active: #ddbd16;
53
+ --pds-color-brand-primary-100: #f4f3fc;
54
+ --pds-color-brand-primary-200: #e5e0f8;
55
+ --pds-color-brand-primary-300: #cbc2f0;
56
+ --pds-color-brand-primary-400: #4f32ce;
57
+ --pds-color-brand-primary-500: #3017a1;
58
+ --pds-color-brand-primary-600: #12026f;
59
+ --pds-color-brand-primary-default: #4f32ce;
60
+ --pds-color-brand-secondary-100: #fffbe9;
61
+ --pds-color-brand-secondary-200: #fff1a9;
62
+ --pds-color-brand-secondary-300: #ffe668;
63
+ --pds-color-brand-secondary-400: #ffdc28;
64
+ --pds-color-brand-secondary-500: #ddbd16;
65
+ --pds-color-brand-secondary-600: #726009;
66
+ --pds-color-brand-secondary-default: #ffdc28;
67
+ --pds-color-button-brand-background-active: #726009;
19
68
  --pds-color-button-brand-background-default: #ffdc28;
20
- --pds-color-button-brand-background-hover: #ffe668;
21
- --pds-color-button-brand-border-active: #ddbd16;
69
+ --pds-color-button-brand-background-hover: #ddbd16;
70
+ --pds-color-button-brand-border-active: #726009;
22
71
  --pds-color-button-brand-border-default: #ffdc28;
23
- --pds-color-button-brand-border-hover: #ffe668;
72
+ --pds-color-button-brand-border-hover: #ddbd16;
24
73
  --pds-color-button-brand-foreground-active: #23232d;
25
74
  --pds-color-button-brand-foreground-default: #23232d;
26
75
  --pds-color-button-brand-foreground-hover: #23232d;
27
- --pds-color-button-critical-background-active: #700000;
28
- --pds-color-button-critical-background-default: #d61f1f;
29
- --pds-color-button-critical-background-hover: #f83333;
30
- --pds-color-button-critical-border-active: #700000;
31
- --pds-color-button-critical-border-default: #d61f1f;
32
- --pds-color-button-critical-border-hover: #f83333;
33
- --pds-color-button-critical-foreground-active: #ffffff;
34
- --pds-color-button-critical-foreground-default: #ffffff;
35
- --pds-color-button-critical-foreground-hover: #ffffff;
36
- --pds-color-button-primary-background-active: #11005d;
37
- --pds-color-button-primary-background-default: #3017a1;
38
- --pds-color-button-primary-background-hover: #5f41e5;
39
- --pds-color-button-primary-border-active: #11005d;
40
- --pds-color-button-primary-border-default: #3017a1;
41
- --pds-color-button-primary-border-hover: #5f41e5;
76
+ --pds-color-button-brand-secondary-background-active: #e3e4e5;
77
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
78
+ --pds-color-button-brand-secondary-background-hover: #f4f4f4;
79
+ --pds-color-button-brand-secondary-border-active: #23232d;
80
+ --pds-color-button-brand-secondary-border-default: #6a6e7a;
81
+ --pds-color-button-brand-secondary-border-hover: #23232d;
82
+ --pds-color-button-brand-secondary-foreground-active: #23232d;
83
+ --pds-color-button-brand-secondary-foreground-default: #23232d;
84
+ --pds-color-button-brand-secondary-foreground-hover: #23232d;
85
+ --pds-color-button-critical-background-active: #ffdcd8;
86
+ --pds-color-button-critical-background-default: var(--pds-color-background-default);
87
+ --pds-color-button-critical-background-hover: var(--pds-color-status-critical-background);
88
+ --pds-color-button-critical-border-active: #b52f1d;
89
+ --pds-color-button-critical-border-default: var(--pds-color-status-critical-foreground);
90
+ --pds-color-button-critical-border-hover: var(--pds-color-status-critical-foreground);
91
+ --pds-color-button-critical-foreground-active: #b52f1d;
92
+ --pds-color-button-critical-foreground-default: var(--pds-color-status-critical-foreground);
93
+ --pds-color-button-critical-foreground-hover: var(--pds-color-status-critical-foreground);
94
+ --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
95
+ --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
96
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
97
+ --pds-color-button-primary-background-active: #12026f;
98
+ --pds-color-button-primary-background-default: #4f32ce;
99
+ --pds-color-button-primary-background-hover: #3017a1;
100
+ --pds-color-button-primary-border-active: #12026f;
101
+ --pds-color-button-primary-border-default: #4f32ce;
102
+ --pds-color-button-primary-border-hover: #3017a1;
42
103
  --pds-color-button-primary-foreground-active: #ffffff;
43
104
  --pds-color-button-primary-foreground-default: #ffffff;
44
105
  --pds-color-button-primary-foreground-hover: #ffffff;
45
- --pds-color-button-secondary-background-active: #e5dbff;
106
+ --pds-color-button-secondary-background-active: #f4f3fc;
46
107
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
47
- --pds-color-button-secondary-background-hover: #f0ecff;
48
- --pds-color-button-secondary-border-active: #11005d;
49
- --pds-color-button-secondary-border-default: #3017a1;
50
- --pds-color-button-secondary-border-hover: #5f41e5;
51
- --pds-color-button-secondary-foreground-active: #11005d;
52
- --pds-color-button-secondary-foreground-default: #3017a1;
53
- --pds-color-button-secondary-foreground-hover: #3017a1;
54
- --pds-color-button-subtle-background-active: #e5dbff;
108
+ --pds-color-button-secondary-background-hover: #f4f3fc;
109
+ --pds-color-button-secondary-border-active: #3017a1;
110
+ --pds-color-button-secondary-border-default: #4f32ce;
111
+ --pds-color-button-secondary-border-hover: #4f32ce;
112
+ --pds-color-button-secondary-foreground-active: #3017a1;
113
+ --pds-color-button-secondary-foreground-default: #4f32ce;
114
+ --pds-color-button-secondary-foreground-hover: #4f32ce;
55
115
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
- --pds-color-button-subtle-background-hover: #f0ecff;
57
116
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
58
- --pds-color-button-subtle-foreground-active: #11005d;
59
- --pds-color-button-subtle-foreground-default: #3017a1;
117
+ --pds-color-button-subtle-foreground-active: #12026f;
118
+ --pds-color-button-subtle-foreground-default: #4f32ce;
60
119
  --pds-color-button-subtle-foreground-hover: #3017a1;
120
+ --pds-color-code-block-dark-background: var(--pds-color-background-reverse);
121
+ --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
122
+ --pds-color-code-block-dark-highlight: #474954;
123
+ --pds-color-code-block-dark-line-prefix: #9699a1;
124
+ --pds-color-code-block-light-background: #eff0f0;
125
+ --pds-color-code-block-light-foreground: #3b3d45;
126
+ --pds-color-code-block-light-highlight: #dedfe0;
127
+ --pds-color-code-block-light-line-prefix: #686d78;
128
+ --pds-color-code-inline-background: #f4f3fc;
129
+ --pds-color-code-inline-border: #e5e0f8;
130
+ --pds-color-code-inline-text: #000000;
131
+ --pds-color-dashboard-nav-background: var(--pds-color-background-default-secondary);
132
+ --pds-color-dashboard-nav-background-admin: #edecf8;
133
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-background-reverse);
134
+ --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
135
+ --pds-color-dashboard-nav-item-background-hover: #e3e4e5;
136
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-foreground-reverse);
137
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-foreground-default);
138
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-foreground-default);
139
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-background-reverse);
140
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-foreground-reverse);
141
+ --pds-color-dropdown-background: var(--pds-color-background-default);
142
+ --pds-color-dropdown-description: var(--pds-color-foreground-default-secondary);
143
+ --pds-color-dropdown-foreground: var(--pds-color-foreground-default);
144
+ --pds-color-dropdown-heading: var(--pds-color-foreground-default-secondary);
145
+ --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
146
+ --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
147
+ --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
148
+ --pds-color-dropdown-top-border: #dfdfdf;
149
+ --pds-color-expansion-panel-hover: #f4f4f4;
150
+ --pds-color-expansion-panel-open: #f4f4f4;
61
151
  --pds-color-foreground-default: #23232d;
62
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
66
- --pds-color-input-background-critical: #ffebeb;
67
- --pds-color-input-background-default: #ffffff;
68
- --pds-color-input-background-hover: #f0ecff;
69
- --pds-color-input-border-critical: #d61f1f;
70
- --pds-color-input-border-default: #8f8f99;
71
- --pds-color-input-border-hover: #5f41e5;
72
- --pds-color-input-border-success: #1f845a;
73
- --pds-color-input-checked-background: var(--pds-color-interactive-focus);
74
- --pds-color-input-checked-foreground: #ffffff;
75
- --pds-color-input-foreground-critical: #d61f1f;
76
- --pds-color-input-foreground-default: #23232d;
77
- --pds-color-input-foreground-success: #1f845a;
78
- --pds-color-input-placeholder-text: #71717c;
152
+ --pds-color-foreground-default-secondary: #6a6e7a;
153
+ --pds-color-foreground-reverse: #ffffff;
154
+ --pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
155
+ --pds-color-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
156
+ --pds-color-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
157
+ --pds-color-gradient-avatar-earth: linear-gradient(315deg, #6BC5FC 0%, #218C5F 100%);
158
+ --pds-color-gradient-avatar-fall: linear-gradient(135deg, #CC36C9 0%, #FFFF11 100%);
159
+ --pds-color-gradient-avatar-grape: linear-gradient(315deg, #DE0093 0%, #5F41E5 100%);
160
+ --pds-color-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
161
+ --pds-color-gradient-avatar-moon: linear-gradient(315deg, #A2CFFF 0%, #8A70FF 100%);
162
+ --pds-color-gradient-avatar-plum: linear-gradient(135deg, #000006 0%, #782EA9 76.76%);
163
+ --pds-color-gradient-avatar-spring: linear-gradient(315deg, #FFDC28 0%, #218C5F 100%);
164
+ --pds-color-gradient-avatar-summer: linear-gradient(135deg, #FF00C5 0%, #F09737 100%);
165
+ --pds-color-gradient-avatar-sun: linear-gradient(135deg, #E65F35 0%, #FFFF11 100%);
166
+ --pds-color-gradient-avatar-sundown: linear-gradient(135deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
167
+ --pds-color-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
168
+ --pds-color-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
169
+ --pds-color-gradient-avatar-winter: linear-gradient(315deg, #FFDC28 0%, #5F41E5 100%);
170
+ --pds-color-gradient-card-fog: linear-gradient(45deg, #EAD7D3 0%, #A2DCFF 100%);
171
+ --pds-color-gradient-card-lavender: linear-gradient(225deg, #8A70FF 0%, #BFB1FF 100%);
172
+ --pds-color-gradient-card-mint: linear-gradient(225deg, #4BCE97 0%, #BAF3DB 100%);
173
+ --pds-color-gradient-card-royal: linear-gradient(225deg, #3017A1 0%, #8A70FF 100%);
174
+ --pds-color-gradient-card-sundown: linear-gradient(225deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
175
+ --pds-color-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
176
+ --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
177
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
178
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
179
+ --pds-color-icon-button-reverse-background-hover: #474954;
180
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
181
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
182
+ --pds-color-input-checkbox-checked-foreground: #ffffff;
183
+ --pds-color-input-file-upload-button-background-default: #f4f4f4;
184
+ --pds-color-input-file-upload-button-background-hover: #e3e4e5;
185
+ --pds-color-input-switch-icon: #ffffff;
186
+ --pds-color-interactive-background-active: #e3e4e5;
187
+ --pds-color-interactive-background-hover: #f4f4f4;
79
188
  --pds-color-interactive-focus: #0f62fe;
80
- --pds-color-link-active: #5f41e5;
81
- --pds-color-link-default: #0f62fe;
82
- --pds-color-link-hover: #5f41e5;
83
- --pds-color-link-visited: #5f41e5;
84
- --pds-color-menu-background: #ffffff;
85
- --pds-color-menu-item-background-active: #cfcfd3;
86
- --pds-color-menu-item-background-default: #ffffff;
87
- --pds-color-menu-item-background-hover: #f1f1f1;
88
- --pds-color-menu-item-description-text: #71717c;
89
- --pds-color-menu-item-foreground: #23232d;
90
- --pds-color-menu-item-heading-text: #71717c;
91
- --pds-color-panel-default-background: var(--pds-color-background-default);
92
- --pds-color-panel-default-border: var(--pds-color-border-default);
93
- --pds-color-panel-overlay-background: var(--pds-color-background-default);
94
- --pds-color-panel-overlay-border: var(--pds-color-border-default);
95
- --pds-color-panel-raised-background: var(--pds-color-background-default);
96
- --pds-color-panel-raised-border: var(--pds-color-border-default);
97
- --pds-color-panel-sunken-background: #f1f1f1;
98
- --pds-color-panel-sunken-border: #f1f1f1;
189
+ --pds-color-interactive-link-active: #3017a1;
190
+ --pds-color-interactive-link-default: #0f62fe;
191
+ --pds-color-interactive-link-hover: #4f32ce;
192
+ --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;
198
+ --pds-color-nav-item-default-foreground-active: #4f32ce;
199
+ --pds-color-nav-item-default-foreground-hover: #4f32ce;
200
+ --pds-color-nav-item-default-foreground-trigger: #6a6e7a;
201
+ --pds-color-nav-item-reverse-foreground-active: #e5e0f8;
202
+ --pds-color-nav-item-reverse-foreground-hover: #e5e0f8;
203
+ --pds-color-neutral-000: #ffffff;
204
+ --pds-color-neutral-100: #f4f4f4;
205
+ --pds-color-neutral-200: #e3e4e5;
206
+ --pds-color-neutral-300: #c3c5c9;
207
+ --pds-color-neutral-400: #6a6e7a;
208
+ --pds-color-neutral-500: #23232d;
209
+ --pds-color-neutral-600: #000000;
210
+ --pds-color-overlay: rgba(9, 0, 48, 0.45);
211
+ --pds-color-pagination-background-active: #e5e0f8;
212
+ --pds-color-pagination-background-hover: var(--pds-color-brand-primary-100);
213
+ --pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
214
+ --pds-color-pagination-foreground-hover: var(--pds-color-interactive-link-hover);
215
+ --pds-color-panel-sunken-background: #f4f4f4;
216
+ --pds-color-partner-bitbucket: #004dc0;
217
+ --pds-color-partner-drupal: #009cde;
218
+ --pds-color-partner-gatsby: #663399;
219
+ --pds-color-partner-gitlab: #ffedfb;
220
+ --pds-color-partner-nextjs: #000000;
221
+ --pds-color-partner-wordpress: #0073aa;
222
+ --pds-color-segmented-button-background-active: #f4f3fc;
223
+ --pds-color-segmented-button-background-default: #ffffff;
224
+ --pds-color-segmented-button-border-active: #4f32ce;
225
+ --pds-color-segmented-button-foreground-active: #4f32ce;
226
+ --pds-color-segmented-button-foreground-default: #6a6e7a;
227
+ --pds-color-social-rss: #f26522;
228
+ --pds-color-status-critical-background: #ffefee;
229
+ --pds-color-status-critical-foreground: #bc1c11;
230
+ --pds-color-status-critical-utility: #de2e21;
231
+ --pds-color-status-discovery-background: #f0edff;
232
+ --pds-color-status-discovery-foreground: #8e74ff;
233
+ --pds-color-status-discovery-utility: #cfc5ff;
234
+ --pds-color-status-info-background: #d7edff;
235
+ --pds-color-status-info-foreground: #0875e1;
236
+ --pds-color-status-info-utility: #a6d2ff;
237
+ --pds-color-status-neutral-background: #c3c5c9;
238
+ --pds-color-status-neutral-foreground: #23232d;
239
+ --pds-color-status-neutral-utility: #6a6e7a;
240
+ --pds-color-status-success-background: #ebfff0;
241
+ --pds-color-status-success-foreground: #217a37;
242
+ --pds-color-status-success-utility: #43c463;
243
+ --pds-color-status-warning-background: #ffeed9;
244
+ --pds-color-status-warning-foreground: #b06300;
245
+ --pds-color-status-warning-utility: #ffa126;
246
+ --pds-color-tag-1-background: #ded8fa;
247
+ --pds-color-tag-1-foreground: #5c4fac;
248
+ --pds-color-tag-10-background: #d0dffc;
249
+ --pds-color-tag-10-foreground: #2254c5;
250
+ --pds-color-tag-11-background: #72cb9b;
251
+ --pds-color-tag-11-foreground: #264a37;
252
+ --pds-color-tag-12-background: #81c1dd;
253
+ --pds-color-tag-12-foreground: #234453;
254
+ --pds-color-tag-13-background: #689bf8;
255
+ --pds-color-tag-13-foreground: #163168;
256
+ --pds-color-tag-14-background: #9c90e9;
257
+ --pds-color-tag-14-foreground: #342c60;
258
+ --pds-color-tag-15-background: #e7796d;
259
+ --pds-color-tag-15-foreground: #54221c;
260
+ --pds-color-tag-16-background: #f1a76e;
261
+ --pds-color-tag-16-foreground: #68320f;
262
+ --pds-color-tag-17-background: #d87ab8;
263
+ --pds-color-tag-17-foreground: #49273e;
264
+ --pds-color-tag-18-background: #efce60;
265
+ --pds-color-tag-18-foreground: #504012;
266
+ --pds-color-tag-19-background: #9fc65b;
267
+ --pds-color-tag-19-foreground: #3f4d27;
268
+ --pds-color-tag-2-background: #f8d7d3;
269
+ --pds-color-tag-2-foreground: #a0392c;
270
+ --pds-color-tag-20-background: #8790a0;
271
+ --pds-color-tag-20-foreground: #0e1e40;
272
+ --pds-color-tag-3-background: #f5e7a8;
273
+ --pds-color-tag-3-foreground: #7b611e;
274
+ --pds-color-tag-4-background: #f7d7ec;
275
+ --pds-color-tag-4-foreground: #894271;
276
+ --pds-color-tag-5-background: #d9f0af;
277
+ --pds-color-tag-5-foreground: #536a2b;
278
+ --pds-color-tag-6-background: #dddfe3;
279
+ --pds-color-tag-6-foreground: #47546d;
280
+ --pds-color-tag-7-background: #c6f1dc;
281
+ --pds-color-tag-7-foreground: #3e7256;
282
+ --pds-color-tag-8-background: #f9dfcb;
283
+ --pds-color-tag-8-foreground: #9a4e1c;
284
+ --pds-color-tag-9-background: #ceecf9;
285
+ --pds-color-tag-9-foreground: #366880;
99
286
  --pds-color-text-default: #23232d;
100
- --pds-color-text-default-secondary: #71717c;
101
- --pds-color-text-headings: var(--pds-color-text-default);
102
- --pds-color-text-lead: var(--pds-color-text-default-secondary);
103
- --pds-color-text-overline: var(--pds-color-text-default-secondary);
104
- --pds-color-text-paragraph: #23232d;
105
- --pds-color-text-quote: var(--pds-color-text-default-secondary);
106
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
107
- --pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
287
+ --pds-color-text-default-secondary: #6a6e7a;
288
+ --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);
293
+ --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
+ --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);
108
295
  }