@pantheon-systems/pds-design-tokens 1.0.0-dev.99 → 1.0.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 (9) hide show
  1. package/README.md +1 -1
  2. package/build/css/pds-design-tokens-dark-mode.css +176 -175
  3. package/build/css/pds-design-tokens-light-mode.css +283 -183
  4. package/build/css/pds-design-tokens.css +71 -30
  5. package/build/figma/pds-design-tokens-figma.json +14464 -10357
  6. package/build/json/pds-design-tokens-dark-mode.json +3567 -3827
  7. package/build/json/pds-design-tokens-light-mode.json +4953 -2870
  8. package/build/json/pds-design-tokens.json +1251 -394
  9. package/package.json +7 -5
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -9,220 +9,320 @@
9
9
  * This file has been generated automatically.
10
10
  */
11
11
 
12
- :root {
13
- --pds-color-background-brand-secondary: #e5dbff;
14
- --pds-color-background-default: #ffffff;
15
- --pds-color-background-default-secondary: #f8f8f8;
16
- --pds-color-background-reverse: #23232d;
17
- --pds-color-badge-border: var(--pds-color-border-default);
18
- --pds-color-badge-indicator-diamond-background: #f0fdff;
19
- --pds-color-badge-indicator-diamond-foreground: #1d7afc;
20
- --pds-color-badge-indicator-early-access-background: #e3fcef;
21
- --pds-color-badge-indicator-early-access-foreground: #218c5f;
22
- --pds-color-badge-indicator-gold-background: #fff1a9;
23
- --pds-color-badge-indicator-gold-foreground: #705e00;
24
- --pds-color-badge-indicator-platinum-background: #f0ecff;
25
- --pds-color-badge-indicator-platinum-foreground: #3017a1;
26
- --pds-color-badge-indicator-silver-background: #f1f1f1;
27
- --pds-color-badge-indicator-silver-foreground: var(--pds-color-text-default-secondary);
28
- --pds-color-badge-label: var(--pds-color-text-default-secondary);
29
- --pds-color-badge-status-critical: var(--pds-color-semantic-critical-foreground);
30
- --pds-color-badge-status-default: #cfcfd3;
31
- --pds-color-badge-status-discovery: var(--pds-color-semantic-discovery-foreground);
32
- --pds-color-badge-status-frozen: #e5dbff;
33
- --pds-color-badge-status-info: var(--pds-color-semantic-info-foreground);
34
- --pds-color-badge-status-success: var(--pds-color-semantic-success-foreground);
35
- --pds-color-badge-status-warning: var(--pds-color-semantic-warning-foreground);
36
- --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
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-diamond-background: #d7edff;
18
+ --pds-color-badge-indicator-diamond-foreground: #0766c5;
19
+ --pds-color-badge-indicator-gold-background: #ffe668;
20
+ --pds-color-badge-indicator-gold-foreground: #726009;
21
+ --pds-color-badge-indicator-info-background: #0875e1;
22
+ --pds-color-badge-indicator-info-foreground: #ffffff;
23
+ --pds-color-badge-indicator-neutral-background: #6a6e7a;
24
+ --pds-color-badge-indicator-neutral-foreground: #ffffff;
25
+ --pds-color-badge-indicator-platinum-background: #e5e0f8;
26
+ --pds-color-badge-indicator-platinum-foreground: #4f32ce;
27
+ --pds-color-badge-indicator-silver-background: #c3c5c9;
28
+ --pds-color-badge-indicator-silver-foreground: #23232d;
29
+ --pds-color-badge-indicator-success-background: #217a37;
30
+ --pds-color-badge-indicator-success-foreground: #ffffff;
31
+ --pds-color-badge-indicator-warning-background: #b06300;
32
+ --pds-color-badge-indicator-warning-foreground: #ffffff;
33
+ --pds-color-banner-critical-background: #de2e21;
37
34
  --pds-color-banner-critical-foreground: #ffffff;
38
- --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
35
+ --pds-color-banner-info-background: #0875e1;
39
36
  --pds-color-banner-info-foreground: #ffffff;
40
- --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
37
+ --pds-color-banner-warning-background: #ffa126;
41
38
  --pds-color-banner-warning-foreground: #23232d;
42
- --pds-color-border-default: rgba(0, 0, 0, 0.11);
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);
48
+ --pds-color-border-brand: #e5e0f8;
49
+ --pds-color-border-critical: var(--pds-color-status-critical-foreground);
50
+ --pds-color-border-default: #e3e4e5;
51
+ --pds-color-border-input: #c3c5c9;
52
+ --pds-color-border-separator: #c3c5c9;
53
+ --pds-color-border-success: var(--pds-color-status-success-foreground);
54
+ --pds-color-brand-accent-100: #ffe5f6;
55
+ --pds-color-brand-accent-200: #ff99dc;
56
+ --pds-color-brand-accent-300: #ff4cc3;
57
+ --pds-color-brand-accent-400: #de0093;
58
+ --pds-color-brand-accent-500: #9a0066;
59
+ --pds-color-brand-accent-600: #560039;
43
60
  --pds-color-brand-accent-default: #de0093;
44
- --pds-color-brand-primary-default: #ffdc28;
45
- --pds-color-brand-secondary-default: #3017a1;
46
- --pds-color-breadcrumb-link: var(--pds-color-link-default);
47
- --pds-color-breadcrumb-separator: #cfcfd3;
48
- --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
49
- --pds-color-button-brand-background-active: #ddbd16;
61
+ --pds-color-brand-primary-100: #f4f3fc;
62
+ --pds-color-brand-primary-200: #e5e0f8;
63
+ --pds-color-brand-primary-300: #cbc2f0;
64
+ --pds-color-brand-primary-400: #4f32ce;
65
+ --pds-color-brand-primary-500: #3017a1;
66
+ --pds-color-brand-primary-600: #12026f;
67
+ --pds-color-brand-primary-default: #4f32ce;
68
+ --pds-color-brand-secondary-100: #fffbe9;
69
+ --pds-color-brand-secondary-200: #fff1a9;
70
+ --pds-color-brand-secondary-300: #ffe668;
71
+ --pds-color-brand-secondary-400: #ffdc28;
72
+ --pds-color-brand-secondary-500: #ddbd16;
73
+ --pds-color-brand-secondary-600: #726009;
74
+ --pds-color-brand-secondary-default: #ffdc28;
75
+ --pds-color-button-brand-background-active: #a88f10;
50
76
  --pds-color-button-brand-background-default: #ffdc28;
51
- --pds-color-button-brand-background-hover: #ffe668;
52
- --pds-color-button-brand-border-active: #ddbd16;
77
+ --pds-color-button-brand-background-hover: #ddbd16;
78
+ --pds-color-button-brand-border-active: #a88f10;
53
79
  --pds-color-button-brand-border-default: #ffdc28;
54
- --pds-color-button-brand-border-hover: #ffe668;
80
+ --pds-color-button-brand-border-hover: #ddbd16;
55
81
  --pds-color-button-brand-foreground-active: #23232d;
56
82
  --pds-color-button-brand-foreground-default: #23232d;
57
83
  --pds-color-button-brand-foreground-hover: #23232d;
58
- --pds-color-button-brand-secondary-background-active: #f1f1f1;
84
+ --pds-color-button-brand-secondary-background-active: #e3e4e5;
59
85
  --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
60
- --pds-color-button-brand-secondary-background-hover: #f8f8f8;
86
+ --pds-color-button-brand-secondary-background-hover: #f4f4f4;
61
87
  --pds-color-button-brand-secondary-border-active: #23232d;
62
- --pds-color-button-brand-secondary-border-default: #6d6d78;
88
+ --pds-color-button-brand-secondary-border-default: #6a6e7a;
63
89
  --pds-color-button-brand-secondary-border-hover: #23232d;
64
90
  --pds-color-button-brand-secondary-foreground-active: #23232d;
65
91
  --pds-color-button-brand-secondary-foreground-default: #23232d;
66
92
  --pds-color-button-brand-secondary-foreground-hover: #23232d;
67
- --pds-color-button-critical-background-active: #ffdcd8;
68
- --pds-color-button-critical-background-default: var(--pds-color-background-default);
69
- --pds-color-button-critical-background-hover: var(--pds-color-semantic-critical-background);
70
- --pds-color-button-critical-border-active: #b52f1d;
71
- --pds-color-button-critical-border-default: var(--pds-color-semantic-critical-foreground);
72
- --pds-color-button-critical-border-hover: var(--pds-color-semantic-critical-foreground);
73
- --pds-color-button-critical-foreground-active: #b52f1d;
74
- --pds-color-button-critical-foreground-default: var(--pds-color-semantic-critical-foreground);
75
- --pds-color-button-critical-foreground-hover: var(--pds-color-semantic-critical-foreground);
76
- --pds-color-button-navbar-foreground-active: var(--pds-color-link-active);
77
- --pds-color-button-navbar-foreground-default: var(--pds-color-foreground-default);
78
- --pds-color-button-navbar-foreground-hover: var(--pds-color-link-hover);
79
- --pds-color-button-primary-background-active: #11005d;
80
- --pds-color-button-primary-background-default: #3017a1;
81
- --pds-color-button-primary-background-hover: #5f41e5;
82
- --pds-color-button-primary-border-active: #11005d;
83
- --pds-color-button-primary-border-default: #3017a1;
84
- --pds-color-button-primary-border-hover: #5f41e5;
93
+ --pds-color-button-critical-background-active: #790b03;
94
+ --pds-color-button-critical-background-default: var(--pds-color-status-critical-foreground);
95
+ --pds-color-button-critical-background-hover: #9e140b;
96
+ --pds-color-button-critical-border-active: #790b03;
97
+ --pds-color-button-critical-border-default: var(--pds-color-status-critical-foreground);
98
+ --pds-color-button-critical-border-hover: #9e140b;
99
+ --pds-color-button-critical-foreground-active: #ffffff;
100
+ --pds-color-button-critical-foreground-default: #ffffff;
101
+ --pds-color-button-critical-foreground-hover: #ffffff;
102
+ --pds-color-button-critical-secondary-background-active: #ffdcd8;
103
+ --pds-color-button-critical-secondary-background-default: rgba(0, 0, 0, 0);
104
+ --pds-color-button-critical-secondary-background-hover: var(--pds-color-status-critical-background);
105
+ --pds-color-button-critical-secondary-border-active: var(--pds-color-button-critical-border-active);
106
+ --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
107
+ --pds-color-button-critical-secondary-border-hover: var(--pds-color-button-critical-border-hover);
108
+ --pds-color-button-critical-secondary-foreground-active: var(--pds-color-status-critical-foreground);
109
+ --pds-color-button-critical-secondary-foreground-default: var(--pds-color-status-critical-foreground);
110
+ --pds-color-button-critical-secondary-foreground-hover: var(--pds-color-status-critical-foreground);
111
+ --pds-color-button-navbar-foreground-active: var(--pds-color-interactive-link-active);
112
+ --pds-color-button-navbar-foreground-default: var(--pds-color-fg-default);
113
+ --pds-color-button-navbar-foreground-hover: var(--pds-color-interactive-link-hover);
114
+ --pds-color-button-primary-background-active: #12026f;
115
+ --pds-color-button-primary-background-default: #4f32ce;
116
+ --pds-color-button-primary-background-hover: #3017a1;
117
+ --pds-color-button-primary-border-active: #12026f;
118
+ --pds-color-button-primary-border-default: #4f32ce;
119
+ --pds-color-button-primary-border-hover: #3017a1;
85
120
  --pds-color-button-primary-foreground-active: #ffffff;
86
121
  --pds-color-button-primary-foreground-default: #ffffff;
87
122
  --pds-color-button-primary-foreground-hover: #ffffff;
88
- --pds-color-button-secondary-background-active: #e5dbff;
123
+ --pds-color-button-secondary-background-active: #f4f3fc;
89
124
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
90
- --pds-color-button-secondary-background-hover: #f0ecff;
91
- --pds-color-button-secondary-border-active: #11005d;
92
- --pds-color-button-secondary-border-default: #3017a1;
93
- --pds-color-button-secondary-border-hover: #5f41e5;
94
- --pds-color-button-secondary-foreground-active: #11005d;
95
- --pds-color-button-secondary-foreground-default: #3017a1;
96
- --pds-color-button-secondary-foreground-hover: #3017a1;
125
+ --pds-color-button-secondary-background-hover: #f4f3fc;
126
+ --pds-color-button-secondary-border-active: #3017a1;
127
+ --pds-color-button-secondary-border-default: #4f32ce;
128
+ --pds-color-button-secondary-border-hover: #4f32ce;
129
+ --pds-color-button-secondary-foreground-active: #3017a1;
130
+ --pds-color-button-secondary-foreground-default: #4f32ce;
131
+ --pds-color-button-secondary-foreground-hover: #4f32ce;
97
132
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
98
133
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
99
- --pds-color-button-subtle-foreground-active: #11005d;
100
- --pds-color-button-subtle-foreground-default: #3017a1;
101
- --pds-color-button-subtle-foreground-hover: #5f41e5;
102
- --pds-color-card-border: var(--pds-color-border-default);
103
- --pds-color-code-inline-background: #f0ecff;
104
- --pds-color-code-inline-border: #e5dbff;
134
+ --pds-color-button-subtle-foreground-active: #12026f;
135
+ --pds-color-button-subtle-foreground-default: #4f32ce;
136
+ --pds-color-button-subtle-foreground-hover: #3017a1;
137
+ --pds-color-card-background: #ffffff;
138
+ --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
139
+ --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
140
+ --pds-color-code-block-dark-highlight: #474954;
141
+ --pds-color-code-block-dark-line-prefix: #9699a1;
142
+ --pds-color-code-block-light-background: #eff0f0;
143
+ --pds-color-code-block-light-foreground: #3b3d45;
144
+ --pds-color-code-block-light-highlight: #dedfe0;
145
+ --pds-color-code-block-light-line-prefix: #686d78;
146
+ --pds-color-code-inline-background: #f4f3fc;
147
+ --pds-color-code-inline-border: #e5e0f8;
105
148
  --pds-color-code-inline-text: #000000;
106
- --pds-color-expansion-panel-hover: #f1f1f1;
107
- --pds-color-expansion-panel-open: #f1f1f1;
108
- --pds-color-foreground-default: #23232d;
109
- --pds-color-foreground-reverse: #ffffff;
110
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
111
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
112
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
113
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
114
- --pds-color-icon-button-critical-background-active: var(--pds-color-button-critical-background-active);
115
- --pds-color-icon-button-critical-background-default: var(--pds-color-button-critical-background-default);
116
- --pds-color-icon-button-critical-background-hover: var(--pds-color-button-critical-background-hover);
117
- --pds-color-icon-button-critical-foreground-default: var(--pds-color-button-critical-foreground-default);
118
- --pds-color-icon-button-standard-background-active: #cfcfd3;
119
- --pds-color-icon-button-standard-background-default: rgba(0, 0, 0, 0);
120
- --pds-color-icon-button-standard-background-hover: #f1f1f1;
121
- --pds-color-icon-button-standard-foreground-default: #23232d;
122
- --pds-color-input-action-background-hover: #f8f8f8;
123
- --pds-color-input-background-critical: #ffedeb;
124
- --pds-color-input-background-default: #ffffff;
125
- --pds-color-input-background-hover: #f0ecff;
126
- --pds-color-input-border-critical: #ca3521;
127
- --pds-color-input-border-default: #cfcfd3;
128
- --pds-color-input-border-hover: #5f41e5;
129
- --pds-color-input-border-success: #218c5f;
130
- --pds-color-input-checked-background: var(--pds-color-interactive-focus);
131
- --pds-color-input-checked-foreground: #ffffff;
132
- --pds-color-input-foreground-critical: #ca3521;
133
- --pds-color-input-foreground-default: #23232d;
134
- --pds-color-input-foreground-success: #218c5f;
135
- --pds-color-input-placeholder-text: #6d6d78;
136
- --pds-color-input-toggle-switch-icon: #ffffff;
137
- --pds-color-input-toggle-switch-off: #6d6d78;
138
- --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
149
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
150
+ --pds-color-dashboard-nav-background-admin: #edecf8;
151
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
152
+ --pds-color-dashboard-nav-item-background-default: rgba(0, 0, 0, 0);
153
+ --pds-color-dashboard-nav-item-background-hover: #e3e4e5;
154
+ --pds-color-dashboard-nav-item-background-hover-admin: #ffffff;
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);
160
+ --pds-color-datavis-1: #003f5c;
161
+ --pds-color-datavis-2: #006779;
162
+ --pds-color-datavis-3: #008d6f;
163
+ --pds-color-datavis-4: #62ad43;
164
+ --pds-color-datavis-5: #ddbd16;
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);
169
+ --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
170
+ --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
171
+ --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
172
+ --pds-color-dropdown-top-border: #dfdfdf;
173
+ --pds-color-expansion-panel-hover: #f4f4f4;
174
+ --pds-color-expansion-panel-open: #f4f4f4;
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);
183
+ --pds-color-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
184
+ --pds-color-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
185
+ --pds-color-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
186
+ --pds-color-gradient-avatar-earth: linear-gradient(315deg, #6BC5FC 0%, #218C5F 100%);
187
+ --pds-color-gradient-avatar-fall: linear-gradient(135deg, #CC36C9 0%, #FFFF11 100%);
188
+ --pds-color-gradient-avatar-grape: linear-gradient(315deg, #DE0093 0%, #5F41E5 100%);
189
+ --pds-color-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
190
+ --pds-color-gradient-avatar-moon: linear-gradient(315deg, #A2CFFF 0%, #8A70FF 100%);
191
+ --pds-color-gradient-avatar-plum: linear-gradient(135deg, #000006 0%, #782EA9 76.76%);
192
+ --pds-color-gradient-avatar-spring: linear-gradient(315deg, #FFDC28 0%, #218C5F 100%);
193
+ --pds-color-gradient-avatar-summer: linear-gradient(135deg, #FF00C5 0%, #F09737 100%);
194
+ --pds-color-gradient-avatar-sun: linear-gradient(135deg, #E65F35 0%, #FFFF11 100%);
195
+ --pds-color-gradient-avatar-sundown: linear-gradient(135deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
196
+ --pds-color-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
197
+ --pds-color-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
198
+ --pds-color-gradient-avatar-winter: linear-gradient(315deg, #FFDC28 0%, #5F41E5 100%);
199
+ --pds-color-gradient-card-fog: linear-gradient(45deg, #EAD7D3 0%, #A2DCFF 100%);
200
+ --pds-color-gradient-card-lavender: linear-gradient(225deg, #8A70FF 0%, #BFB1FF 100%);
201
+ --pds-color-gradient-card-mint: linear-gradient(225deg, #4BCE97 0%, #BAF3DB 100%);
202
+ --pds-color-gradient-card-royal: linear-gradient(225deg, #3017A1 0%, #8A70FF 100%);
203
+ --pds-color-gradient-card-sundown: linear-gradient(225deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
204
+ --pds-color-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
205
+ --pds-color-icon-button-critical-background-active: hsl(from var(--pds-color-status-critical-utility) h s l / 0.15);
206
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
207
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
208
+ --pds-color-icon-button-reverse-background-hover: #474954;
209
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
210
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
211
+ --pds-color-input-checkbox-checked-foreground: #ffffff;
212
+ --pds-color-input-file-upload-button-background-default: #f4f4f4;
213
+ --pds-color-input-file-upload-button-background-hover: #e3e4e5;
214
+ --pds-color-input-switch-icon: #ffffff;
215
+ --pds-color-interactive-background-active: #e3e4e5;
216
+ --pds-color-interactive-background-hover: #f4f4f4;
139
217
  --pds-color-interactive-focus: #0f62fe;
140
- --pds-color-interactive-link: #0f62fe;
141
- --pds-color-interactive-reverse-focus: #36a3ff;
142
- --pds-color-interactive-reverse-link: #36a3ff;
143
- --pds-color-link-active: #5f41e5;
144
- --pds-color-link-cta-active: #11005d;
145
- --pds-color-link-cta-default: #3017a1;
146
- --pds-color-link-cta-hover: #5f41e5;
147
- --pds-color-link-default: #0f62fe;
148
- --pds-color-link-hover: #5f41e5;
149
- --pds-color-link-visited: #5f41e5;
150
- --pds-color-menu-background: #ffffff;
151
- --pds-color-menu-item-background-active: #f1f1f1;
152
- --pds-color-menu-item-background-default: #ffffff;
153
- --pds-color-menu-item-background-hover: #f1f1f1;
154
- --pds-color-menu-item-description-text: #6d6d78;
155
- --pds-color-menu-item-foreground: #23232d;
156
- --pds-color-menu-item-heading-text: #6d6d78;
218
+ --pds-color-interactive-link-active: #3017a1;
219
+ --pds-color-interactive-link-default: #0f62fe;
220
+ --pds-color-interactive-link-hover: #4f32ce;
221
+ --pds-color-interactive-link-visited: #4f32ce;
222
+ --pds-color-interactive-reverse-focus: #4888fe;
223
+ --pds-color-interactive-reverse-link-active: #836fdc;
224
+ --pds-color-interactive-reverse-link-default: #4888fe;
225
+ --pds-color-interactive-reverse-link-hover: #9584e1;
226
+ --pds-color-interactive-reverse-link-visited: #9584e1;
227
+ --pds-color-nav-item-default-foreground-active: #4f32ce;
228
+ --pds-color-nav-item-default-foreground-hover: #4f32ce;
229
+ --pds-color-nav-item-default-foreground-trigger: #6a6e7a;
230
+ --pds-color-nav-item-reverse-foreground-active: #e5e0f8;
231
+ --pds-color-nav-item-reverse-foreground-hover: #e5e0f8;
157
232
  --pds-color-neutral-000: #ffffff;
158
- --pds-color-neutral-100: #f8f8f8;
159
- --pds-color-neutral-200: #f1f1f1;
160
- --pds-color-neutral-300: #cfcfd3;
161
- --pds-color-neutral-400: #6d6d78;
233
+ --pds-color-neutral-100: #f4f4f4;
234
+ --pds-color-neutral-200: #e3e4e5;
235
+ --pds-color-neutral-300: #c3c5c9;
236
+ --pds-color-neutral-400: #6a6e7a;
162
237
  --pds-color-neutral-500: #23232d;
238
+ --pds-color-neutral-600: #000000;
163
239
  --pds-color-overlay: rgba(9, 0, 48, 0.45);
164
- --pds-color-pager-background-active: #f0ecff;
165
- --pds-color-pager-background-hover: #f1f1f1;
166
- --pds-color-pager-foreground-active: #5f41e5;
167
- --pds-color-panel-default-background: var(--pds-color-background-default);
168
- --pds-color-panel-default-border: var(--pds-color-border-default);
169
- --pds-color-panel-sunken-background: #f1f1f1;
240
+ --pds-color-pagination-background-active: #e5e0f8;
241
+ --pds-color-pagination-background-hover: var(--pds-color-brand-primary-100);
242
+ --pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
243
+ --pds-color-pagination-foreground-hover: var(--pds-color-interactive-link-hover);
244
+ --pds-color-panel-overlay-background: #ffffff;
245
+ --pds-color-panel-raised-background: #ffffff;
246
+ --pds-color-panel-sunken-background: #f4f4f4;
170
247
  --pds-color-partner-bitbucket: #004dc0;
171
248
  --pds-color-partner-drupal: #009cde;
172
249
  --pds-color-partner-gatsby: #663399;
173
- --pds-color-partner-gitlab: #ffedfb;
250
+ --pds-color-partner-github: #2da44e;
251
+ --pds-color-partner-gitlab: #fc6d26;
252
+ --pds-color-partner-google: #4285f4;
174
253
  --pds-color-partner-nextjs: #000000;
175
254
  --pds-color-partner-wordpress: #0073aa;
176
- --pds-color-progress-complete: #218c5f;
177
- --pds-color-progress-empty: #cfcfd3;
178
- --pds-color-progress-partial: #1d7afc;
179
- --pds-color-semantic-critical-background: #ffedeb;
180
- --pds-color-semantic-critical-foreground: #ca3521;
181
- --pds-color-semantic-discovery-background: #eae6ff;
182
- --pds-color-semantic-discovery-foreground: #8270db;
183
- --pds-color-semantic-info-background: #e9f2ff;
184
- --pds-color-semantic-info-foreground: #1d7afc;
185
- --pds-color-semantic-success-background: #e3fcef;
186
- --pds-color-semantic-success-foreground: #218c5f;
187
- --pds-color-semantic-warning-background: #fff7d6;
188
- --pds-color-semantic-warning-foreground: #d97008;
189
- --pds-color-strength-fair: #d97008;
190
- --pds-color-strength-strong: #218c5f;
191
- --pds-color-strength-very-weak: #cfcfd3;
192
- --pds-color-strength-weak: #ca3521;
193
- --pds-color-table-sort-arrow-active: #5f41e5;
194
- --pds-color-table-sort-arrow-inactive: #cfcfd3;
195
- --pds-color-tabs-accent: #5f41e5;
196
- --pds-color-tag-1-background: #fffbe9;
197
- --pds-color-tag-1-foreground: #705e00;
198
- --pds-color-tag-2-background: #f0ecff;
199
- --pds-color-tag-2-foreground: #3017a1;
200
- --pds-color-tag-3-background: #ffe5f6;
201
- --pds-color-tag-3-foreground: #9a0066;
202
- --pds-color-tag-4-background: #f1f1f1;
203
- --pds-color-tag-4-foreground: #6d6d78;
204
- --pds-color-tag-5-background: #ffebeb;
205
- --pds-color-tag-5-foreground: #700000;
206
- --pds-color-tag-6-background: #fffae6;
207
- --pds-color-tag-6-foreground: #b15902;
208
- --pds-color-tag-7-background: #dffcf0;
209
- --pds-color-tag-7-foreground: #164b35;
210
- --pds-color-tag-8-background: #f0fdff;
211
- --pds-color-tag-8-foreground: #0f5f6a;
212
- --pds-color-text-default: var(--pds-color-foreground-default);
213
- --pds-color-text-default-secondary: #6d6d78;
214
- --pds-color-text-reverse: var(--pds-color-foreground-reverse);
215
- --pds-color-tile-background-active: #f1f1f1;
216
- --pds-color-tile-background-hover: #f8f8f8;
217
- --pds-color-tile-separator: #cfcfd3;
218
- --pds-color-toggle-button-background-off: #f1f1f1;
219
- --pds-color-toggle-button-foreground-off: #6d6d78;
220
- --pds-color-tooltip-background: #23232d;
221
- --pds-color-tooltip-text: #ffffff;
222
- --pds-color-tooltip-trigger-icon-critical: #ca3521;
223
- --pds-color-tooltip-trigger-icon-default: #23232d;
224
- --pds-elevation-active: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
225
- --pds-elevation-dropdown: 0px 1px 0px 1px rgba(0, 0, 0, 0.08), 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
255
+ --pds-color-segmented-button-background-active: #f4f3fc;
256
+ --pds-color-segmented-button-background-default: #ffffff;
257
+ --pds-color-segmented-button-background-hover: #f4f3fc;
258
+ --pds-color-segmented-button-border-active: #4f32ce;
259
+ --pds-color-segmented-button-foreground-active: #4f32ce;
260
+ --pds-color-segmented-button-foreground-default: #6a6e7a;
261
+ --pds-color-segmented-button-foreground-hover: #4f32ce;
262
+ --pds-color-social-rss: #f26522;
263
+ --pds-color-status-critical-background: #ffefee;
264
+ --pds-color-status-critical-foreground: #bc1c11;
265
+ --pds-color-status-critical-utility: #de2e21;
266
+ --pds-color-status-discovery-background: #f0edff;
267
+ --pds-color-status-discovery-foreground: #8e74ff;
268
+ --pds-color-status-discovery-utility: #cfc5ff;
269
+ --pds-color-status-info-background: #d7edff;
270
+ --pds-color-status-info-foreground: #0875e1;
271
+ --pds-color-status-info-utility: #a6d2ff;
272
+ --pds-color-status-neutral-background: #c3c5c9;
273
+ --pds-color-status-neutral-foreground: #23232d;
274
+ --pds-color-status-neutral-utility: #6a6e7a;
275
+ --pds-color-status-success-background: #ebfff0;
276
+ --pds-color-status-success-foreground: #217a37;
277
+ --pds-color-status-success-utility: #43c463;
278
+ --pds-color-status-warning-background: #ffeed9;
279
+ --pds-color-status-warning-foreground: #b06300;
280
+ --pds-color-status-warning-utility: #ffa126;
281
+ --pds-color-tag-1-background: #ded8fa;
282
+ --pds-color-tag-1-foreground: #5c4fac;
283
+ --pds-color-tag-10-background: #d0dffc;
284
+ --pds-color-tag-10-foreground: #2254c5;
285
+ --pds-color-tag-11-background: #72cb9b;
286
+ --pds-color-tag-11-foreground: #264a37;
287
+ --pds-color-tag-12-background: #81c1dd;
288
+ --pds-color-tag-12-foreground: #234453;
289
+ --pds-color-tag-13-background: #689bf8;
290
+ --pds-color-tag-13-foreground: #163168;
291
+ --pds-color-tag-14-background: #9c90e9;
292
+ --pds-color-tag-14-foreground: #342c60;
293
+ --pds-color-tag-15-background: #e87e73;
294
+ --pds-color-tag-15-foreground: #50201b;
295
+ --pds-color-tag-16-background: #f1a76e;
296
+ --pds-color-tag-16-foreground: #68320f;
297
+ --pds-color-tag-17-background: #da81bc;
298
+ --pds-color-tag-17-foreground: #46253b;
299
+ --pds-color-tag-18-background: #efce60;
300
+ --pds-color-tag-18-foreground: #504012;
301
+ --pds-color-tag-19-background: #9fc65b;
302
+ --pds-color-tag-19-foreground: #3f4d27;
303
+ --pds-color-tag-2-background: #f8d7d3;
304
+ --pds-color-tag-2-foreground: #a0392c;
305
+ --pds-color-tag-20-background: #8790a0;
306
+ --pds-color-tag-20-foreground: #0e1e40;
307
+ --pds-color-tag-3-background: #f5e7a8;
308
+ --pds-color-tag-3-foreground: #7b611e;
309
+ --pds-color-tag-4-background: #f7d7ec;
310
+ --pds-color-tag-4-foreground: #894271;
311
+ --pds-color-tag-5-background: #d9f0af;
312
+ --pds-color-tag-5-foreground: #536a2b;
313
+ --pds-color-tag-6-background: #dddfe3;
314
+ --pds-color-tag-6-foreground: #47546d;
315
+ --pds-color-tag-7-background: #c6f1dc;
316
+ --pds-color-tag-7-foreground: #3e7256;
317
+ --pds-color-tag-8-background: #f9dfcb;
318
+ --pds-color-tag-8-foreground: #9a4e1c;
319
+ --pds-color-tag-9-background: #ceecf9;
320
+ --pds-color-tag-9-foreground: #366880;
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);
324
+ --pds-color-tile-background: #ffffff;
325
+ --pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
226
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);
227
327
  --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);
228
328
  }