@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.
@@ -0,0 +1,248 @@
1
+ :root, [data-theme="light"] {
2
+ --pds-color-badge-indicator-default-background: oklch(0.2046 0 0);
3
+ --pds-color-badge-indicator-default-foreground: oklch(1.0000 0 0);
4
+ --pds-color-badge-indicator-silver-background: oklch(0.8853 0 0);
5
+ --pds-color-badge-indicator-silver-foreground: oklch(0.2046 0 0);
6
+ --pds-color-badge-indicator-gold-background: oklch(0.9316 0.1527 100.8);
7
+ --pds-color-badge-indicator-gold-foreground: oklch(0.5121 0.1051 94.66);
8
+ --pds-color-badge-indicator-diamond-background: oklch(0.9683 0.0161 245.08);
9
+ --pds-color-badge-indicator-diamond-foreground: oklch(0.5558 0.2372 267.79);
10
+ --pds-color-badge-indicator-platinum-background: #E5E0F8;
11
+ --pds-color-badge-indicator-platinum-foreground: #4F32CE;
12
+ --pds-color-badge-indicator-critical-background: oklch(0.5103 0.1942 29.6);
13
+ --pds-color-badge-indicator-critical-foreground: oklch(0.9851 0 0);
14
+ --pds-color-badge-indicator-info-background: oklch(0.5476 0.1867 255.95);
15
+ --pds-color-badge-indicator-info-foreground: oklch(0.9851 0 0);
16
+ --pds-color-badge-indicator-success-background: oklch(0.5118 0.1311 147.75);
17
+ --pds-color-badge-indicator-success-foreground: oklch(0.9851 0 0);
18
+ --pds-color-badge-indicator-warning-background: oklch(0.5635 0.1308 61.09);
19
+ --pds-color-badge-indicator-warning-foreground: oklch(0.9851 0 0);
20
+ --pds-color-badge-indicator-neutral-background: oklch(0.8047 0 0);
21
+ --pds-color-badge-indicator-neutral-foreground: oklch(0.9851 0 0);
22
+ --pds-color-badge-indicator-brand-background: #4F32CE;
23
+ --pds-color-badge-indicator-brand-foreground: oklch(0.9851 0 0);
24
+ --pds-color-banner-info-background: oklch(0.5476 0.1867 255.95);
25
+ --pds-color-banner-info-foreground: oklch(0.9851 0 0);
26
+ --pds-color-banner-warning-background: oklch(0.8008 0.1637 90.52);
27
+ --pds-color-banner-warning-foreground: oklch(0.2046 0 0);
28
+ --pds-color-banner-critical-background: oklch(0.5103 0.1942 29.6);
29
+ --pds-color-banner-critical-foreground: oklch(0.9851 0 0);
30
+ --pds-color-button-primary-background-default: oklch(0.2046 0 0);
31
+ --pds-color-button-primary-background-hover: oklch(0.3715 0 0);
32
+ --pds-color-button-primary-foreground: var(--pds-color-fg-reverse);
33
+ --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
34
+ --pds-color-button-secondary-background-hover: oklch(0.9401 0 0);
35
+ --pds-color-button-secondary-border: oklch(0.5103 0 0);
36
+ --pds-color-button-secondary-foreground: oklch(0.2046 0 0);
37
+ --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
38
+ --pds-color-button-subtle-background-hover: oklch(0.9401 0 0);
39
+ --pds-color-button-subtle-foreground: oklch(0.2046 0 0);
40
+ --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
41
+ --pds-color-button-brand-background-hover: oklch(0.9101 0.1759 98.94);
42
+ --pds-color-button-brand-foreground: oklch(0.2046 0 0);
43
+ --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
44
+ --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
45
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
46
+ --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
47
+ --pds-color-button-critical-secondary-background-hover: var(--pds-color-ares-100);
48
+ --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
49
+ --pds-color-button-critical-secondary-border-hover: var(--pds-color-status-critical-foreground);
50
+ --pds-color-button-critical-secondary-foreground: var(--pds-color-ares-400);
51
+ --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
52
+ --pds-color-button-navbar-background-hover: oklch(1.0000 0 0);
53
+ --pds-color-button-navbar-foreground: oklch(0.2046 0 0);
54
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
55
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
56
+ --pds-color-icon-button-reverse-background-hover: #474954;
57
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
58
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
59
+ --pds-color-icon-button-critical-background-active: var(--pds-color-status-critical-border);
60
+ --pds-color-segmented-button-background-default: oklch(0.9851 0 0);
61
+ --pds-color-segmented-button-background-active: #F4F3FC;
62
+ --pds-color-segmented-button-background-hover: #F4F3FC;
63
+ --pds-color-segmented-button-border-active: #4F32CE;
64
+ --pds-color-segmented-button-foreground-default: oklch(0.8047 0 0);
65
+ --pds-color-segmented-button-foreground-active: #4F32CE;
66
+ --pds-color-segmented-button-foreground-hover: #4F32CE;
67
+ --pds-color-card-background: oklch(0.9851 0 0);
68
+ --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
69
+ --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
70
+ --pds-color-code-block-dark-line-prefix: #9699A1;
71
+ --pds-color-code-block-dark-highlight: #474954;
72
+ --pds-color-code-block-light-background: #EFF0F0;
73
+ --pds-color-code-block-light-foreground: #3B3D45;
74
+ --pds-color-code-block-light-line-prefix: #686D78;
75
+ --pds-color-code-block-light-highlight: #DEDFE0;
76
+ --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
77
+ --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
78
+ --pds-color-dashboard-nav-background: var(--pds-color-bg-default-secondary);
79
+ --pds-color-dashboard-nav-background-admin: #edecf8;
80
+ --pds-color-dashboard-nav-item-background-default: rgba(255, 255, 255, 0.00);
81
+ --pds-color-dashboard-nav-item-background-hover: oklch(0.9401 0 0);
82
+ --pds-color-dashboard-nav-item-background-hover-admin: oklch(0.9851 0 0);
83
+ --pds-color-dashboard-nav-item-background-active: var(--pds-color-bg-reverse);
84
+ --pds-color-dashboard-nav-item-foreground-default: var(--pds-color-fg-default);
85
+ --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
86
+ --pds-color-dashboard-nav-item-foreground-active: var(--pds-color-fg-reverse);
87
+ --pds-color-datepicker-accent-foreground: #4F32CE;
88
+ --pds-color-datepicker-range-background: #F4F3FC;
89
+ --pds-color-datepicker-range-foreground: oklch(0.2046 0 0);
90
+ --pds-color-datepicker-selected-background: #4F32CE;
91
+ --pds-color-datepicker-selected-foreground: oklch(1.0000 0 0);
92
+ --pds-color-pagination-foreground-hover: var(--pds-color-interactive-link-hover);
93
+ --pds-color-pagination-foreground-active: var(--pds-color-interactive-link-active);
94
+ --pds-color-pagination-background-hover: var(--pds-color-brand-primary-100);
95
+ --pds-color-pagination-background-active: #E5E0F8;
96
+ --pds-color-panel-sunken-background: oklch(0.9702 0 0);
97
+ --pds-color-panel-raised-background: oklch(0.9851 0 0);
98
+ --pds-color-panel-overlay-background: oklch(0.9851 0 0);
99
+ --pds-color-expansion-panel-hover: oklch(0.9702 0 0);
100
+ --pds-color-expansion-panel-open: oklch(0.9702 0 0);
101
+ --pds-color-spinner-full-1: rgba(255, 255, 255, 0.00);
102
+ --pds-color-spinner-full-2: oklch(0.8975 0.1774 96.79);
103
+ --pds-color-spinner-full-3: oklch(0.542 0.2895 299.91);
104
+ --pds-color-spinner-mono-1: rgba(255, 255, 255, 0.00);
105
+ --pds-color-spinner-mono-2: #66666680;
106
+ --pds-color-spinner-mono-3: oklch(0.2046 0 0);
107
+ --pds-color-spinner-mono-reverse-1: rgba(255, 255, 255, 0.00);
108
+ --pds-color-spinner-mono-reverse-2: #ffffff80;
109
+ --pds-color-spinner-mono-reverse-3: oklch(1.0000 0 0);
110
+ --pds-color-tag-1-background: #DED8FA;
111
+ --pds-color-tag-1-foreground: #5C4FAC;
112
+ --pds-color-tag-2-background: #F8D7D3;
113
+ --pds-color-tag-2-foreground: #A0392C;
114
+ --pds-color-tag-3-background: #F5E7A8;
115
+ --pds-color-tag-3-foreground: #7B611E;
116
+ --pds-color-tag-4-background: #F7D7EC;
117
+ --pds-color-tag-4-foreground: #894271;
118
+ --pds-color-tag-5-background: #D9F0AF;
119
+ --pds-color-tag-5-foreground: #536A2B;
120
+ --pds-color-tag-6-background: #DDDFE3;
121
+ --pds-color-tag-6-foreground: #47546D;
122
+ --pds-color-tag-7-background: #C6F1DC;
123
+ --pds-color-tag-7-foreground: #3E7256;
124
+ --pds-color-tag-8-background: #F9DFCB;
125
+ --pds-color-tag-8-foreground: #9A4E1C;
126
+ --pds-color-tag-9-background: #CEECF9;
127
+ --pds-color-tag-9-foreground: #366880;
128
+ --pds-color-tag-10-background: #D0DFFC;
129
+ --pds-color-tag-10-foreground: #2254C5;
130
+ --pds-color-tag-11-background: #72CB9B;
131
+ --pds-color-tag-11-foreground: #264A37;
132
+ --pds-color-tag-12-background: #81C1DD;
133
+ --pds-color-tag-12-foreground: #234453;
134
+ --pds-color-tag-13-background: #689BF8;
135
+ --pds-color-tag-13-foreground: #163168;
136
+ --pds-color-tag-14-background: #9C90E9;
137
+ --pds-color-tag-14-foreground: #342C60;
138
+ --pds-color-tag-15-background: #E87E73;
139
+ --pds-color-tag-15-foreground: #50201B;
140
+ --pds-color-tag-16-background: #F1A76E;
141
+ --pds-color-tag-16-foreground: #68320F;
142
+ --pds-color-tag-17-background: #DA81BC;
143
+ --pds-color-tag-17-foreground: #46253B;
144
+ --pds-color-tag-18-background: #EFCE60;
145
+ --pds-color-tag-18-foreground: #504012;
146
+ --pds-color-tag-19-background: #9FC65B;
147
+ --pds-color-tag-19-foreground: #3F4D27;
148
+ --pds-color-tag-20-background: #8790A0;
149
+ --pds-color-tag-20-foreground: #0E1E40;
150
+ --pds-color-tile-background: oklch(0.9851 0 0);
151
+ --pds-color-bg-default: oklch(1.0000 0 0);
152
+ --pds-color-bg-default-secondary: oklch(0.9702 0 0);
153
+ --pds-color-bg-reverse: oklch(0.2046 0 0);
154
+ --pds-color-border-default: oklch(0.9401 0 0);
155
+ --pds-color-border-brand: #E5E0F8;
156
+ --pds-color-border-input: oklch(0.8853 0 0);
157
+ --pds-color-border-separator: oklch(0.8853 0 0);
158
+ --pds-color-code-inline-background: #F4F3FC;
159
+ --pds-color-code-inline-border: #E5E0F8;
160
+ --pds-color-code-inline-text: oklch(0.2046 0 0);
161
+ --pds-color-datavis-1: #003F5C;
162
+ --pds-color-datavis-2: #006779;
163
+ --pds-color-datavis-3: #008D6F;
164
+ --pds-color-datavis-4: #62AD43;
165
+ --pds-color-datavis-5: #DDBD16;
166
+ --pds-color-dropdown-background: var(--pds-color-bg-default);
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-description: var(--pds-color-fg-default-secondary);
170
+ --pds-color-dropdown-item-background-hover: var(--pds-color-interactive-background-hover);
171
+ --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
172
+ --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
173
+ --pds-color-dropdown-top-border: #dfdfdf;
174
+ --pds-color-fg-default: oklch(0.2046 0 0);
175
+ --pds-color-fg-default-secondary: oklch(0.5103 0 0);
176
+ --pds-color-fg-reverse: oklch(1.0000 0 0);
177
+ --pds-color-input-checkbox-checked-foreground: oklch(0.9851 0 0);
178
+ --pds-color-input-file-upload-button-background-default: oklch(0.9702 0 0);
179
+ --pds-color-input-file-upload-button-background-hover: oklch(0.9401 0 0);
180
+ --pds-color-input-switch-icon: oklch(1.0000 0 0);
181
+ --pds-color-interactive-background-hover: oklch(0.9702 0 0);
182
+ --pds-color-interactive-background-active: oklch(0.9401 0 0);
183
+ --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
184
+ --pds-color-interactive-link-default: oklch(0.5558 0.2372 267.79);
185
+ --pds-color-interactive-link-hover: oklch(0.542 0.2895 299.91);
186
+ --pds-color-interactive-link-active: oklch(0.4682 0.2508 299.4);
187
+ --pds-color-interactive-link-visited: oklch(0.4682 0.2508 299.4);
188
+ --pds-color-interactive-reverse-focus: oklch(0.5558 0.2372 267.79);
189
+ --pds-color-interactive-reverse-link-default: oklch(0.5558 0.2372 267.79);
190
+ --pds-color-interactive-reverse-link-hover: oklch(0.542 0.2895 299.91);
191
+ --pds-color-interactive-reverse-link-active: oklch(0.6311 0.2503 304.99);
192
+ --pds-color-interactive-reverse-link-visited: oklch(0.6311 0.2503 304.99);
193
+ --pds-color-nav-item-default-foreground-hover: #4F32CE;
194
+ --pds-color-nav-item-default-foreground-active: #4F32CE;
195
+ --pds-color-nav-item-default-foreground-trigger: oklch(0.8047 0 0);
196
+ --pds-color-nav-item-reverse-foreground-hover: #E5E0F8;
197
+ --pds-color-nav-item-reverse-foreground-active: #E5E0F8;
198
+ --pds-color-overlay: rgba(9, 0, 48, 0.45);
199
+ --pds-color-partner-bitbucket: #004DC0;
200
+ --pds-color-partner-drupal: #009CDE;
201
+ --pds-color-partner-gatsby: #663399;
202
+ --pds-color-partner-github: #2DA44E;
203
+ --pds-color-partner-gitlab: #fc6d26;
204
+ --pds-color-partner-google: #4285F4;
205
+ --pds-color-partner-nextjs: #000000;
206
+ --pds-color-partner-wordpress: #0073AA;
207
+ --pds-color-social-rss: #f26522;
208
+ --pds-color-status-success-foreground: oklch(0.5118 0.1311 147.75);
209
+ --pds-color-status-success-border: oklch(0.9079 0.087 152.53);
210
+ --pds-color-status-success-background: oklch(0.9745 0.0116 153.67);
211
+ --pds-color-status-info-foreground: oklch(0.5476 0.1867 255.95);
212
+ --pds-color-status-info-border: oklch(0.8816 0.0619 245.59);
213
+ --pds-color-status-info-background: oklch(0.9683 0.0161 245.08);
214
+ --pds-color-status-critical-foreground: oklch(0.5103 0.1942 29.6);
215
+ --pds-color-status-critical-border: oklch(0.8326 0.0742 24.95);
216
+ --pds-color-status-critical-background: oklch(0.9645 0.0174 21.81);
217
+ --pds-color-status-warning-foreground: oklch(0.5635 0.1308 61.09);
218
+ --pds-color-status-warning-border: oklch(0.8008 0.1637 90.52);
219
+ --pds-color-status-warning-background: oklch(0.9834 0.0199 97.52);
220
+ --pds-color-status-discovery-foreground: oklch(0.4401 0.1973 306.55);
221
+ --pds-color-status-discovery-border: oklch(0.5817 0.2576 306.75);
222
+ --pds-color-status-discovery-background: oklch(0.9635 0.0220 312.19);
223
+ --pds-elevation-dashboard: 1px 1px 6px -2px rgba(140, 140, 140, 0.2), 1px 1px 0px 0px #f9f9f9;
224
+ --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);
225
+ --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);
226
+ --pds-gradient-avatar-midnight: linear-gradient(315deg, #5F41E5 0%, #141013 100%);
227
+ --pds-gradient-avatar-twilight: linear-gradient(315deg, #C72FA2 0%, #1B0874 100%);
228
+ --pds-gradient-avatar-sunrise: linear-gradient(135deg, #3017A1 0%, #F09737 100%);
229
+ --pds-gradient-avatar-dawn: linear-gradient(315deg, #FFDC28 0%, #A2CFFF 100%);
230
+ --pds-gradient-avatar-sundown: linear-gradient(135deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
231
+ --pds-gradient-avatar-dusk: linear-gradient(315deg, #01EFFE 0%, #FF00C5 100%);
232
+ --pds-gradient-avatar-plum: linear-gradient(135deg, #000006 0%, #782EA9 76.76%);
233
+ --pds-gradient-avatar-grape: linear-gradient(315deg, #DE0093 0%, #5F41E5 100%);
234
+ --pds-gradient-avatar-dragonfruit: linear-gradient(315deg, #D0C6FF 0%, #DE0093 100%);
235
+ --pds-gradient-avatar-winter: linear-gradient(315deg, #FFDC28 0%, #5F41E5 100%);
236
+ --pds-gradient-avatar-spring: linear-gradient(315deg, #FFDC28 0%, #218C5F 100%);
237
+ --pds-gradient-avatar-summer: linear-gradient(135deg, #FF00C5 0%, #F09737 100%);
238
+ --pds-gradient-avatar-fall: linear-gradient(135deg, #CC36C9 0%, #FFFF11 100%);
239
+ --pds-gradient-avatar-earth: linear-gradient(315deg, #6BC5FC 0%, #218C5F 100%);
240
+ --pds-gradient-avatar-moon: linear-gradient(315deg, #A2CFFF 0%, #8A70FF 100%);
241
+ --pds-gradient-avatar-sun: linear-gradient(135deg, #E65F35 0%, #FFFF11 100%);
242
+ --pds-gradient-card-yellow: linear-gradient(225deg, #FFCB45 0%, #FFDC28 50%, #FFF1A9 100%);
243
+ --pds-gradient-card-mint: linear-gradient(225deg, #4BCE97 0%, #BAF3DB 100%);
244
+ --pds-gradient-card-lavender: linear-gradient(225deg, #8A70FF 0%, #BFB1FF 100%);
245
+ --pds-gradient-card-royal: linear-gradient(225deg, #3017A1 0%, #8A70FF 100%);
246
+ --pds-gradient-card-sundown: linear-gradient(225deg, #4BCE97 0%, #A2CFFF 50%, #F9DFCF 100%);
247
+ --pds-gradient-card-fog: linear-gradient(45deg, #EAD7D3 0%, #A2DCFF 100%);
248
+ }