@pantheon-systems/pds-design-tokens 1.0.0-dev.70 → 1.0.0-dev.72

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 (6) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +21 -13
  2. package/build/css/pds-design-tokens-light-mode.css +16 -8
  3. package/build/figma/pds-design-tokens-figma.json +501 -66
  4. package/build/json/pds-design-tokens-dark-mode.json +257 -88
  5. package/build/json/pds-design-tokens-light-mode.json +244 -16
  6. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -12,15 +12,23 @@
12
12
  :root {
13
13
  --pds-color-background-default: #1d1d29;
14
14
  --pds-color-background-default-secondary: #282839;
15
- --pds-color-background-reverse: #c7c5d0;
15
+ --pds-color-background-reverse: #e7e7eb;
16
16
  --pds-color-badge-border: #a6a3b4;
17
- --pds-color-badge-label: #c7c5d0;
17
+ --pds-color-badge-label: #e7e7eb;
18
18
  --pds-color-badge-status-critical: var(--pds-color-semantic-critical-foreground);
19
19
  --pds-color-badge-status-default: #858299;
20
20
  --pds-color-badge-status-discovery: var(--pds-color-semantic-discovery-foreground);
21
21
  --pds-color-badge-status-info: var(--pds-color-semantic-info-foreground);
22
22
  --pds-color-badge-status-success: var(--pds-color-semantic-success-foreground);
23
23
  --pds-color-badge-status-warning: var(--pds-color-semantic-warning-foreground);
24
+ --pds-color-badge-tier-diamond-background: #f0fdff;
25
+ --pds-color-badge-tier-diamond-foreground: var(--pds-color-brand-secondary-400);
26
+ --pds-color-badge-tier-gold-background: #fff1a9;
27
+ --pds-color-badge-tier-gold-foreground: var(--pds-color-brand-primary-600);
28
+ --pds-color-badge-tier-platinum-background: #d0c6ff;
29
+ --pds-color-badge-tier-platinum-foreground: #4e39a8;
30
+ --pds-color-badge-tier-silver-background: #a6a3b4;
31
+ --pds-color-badge-tier-silver-foreground: var(--pds-color-text-default-secondary);
24
32
  --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
25
33
  --pds-color-banner-critical-foreground: #ffffff;
26
34
  --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
@@ -91,10 +99,10 @@
91
99
  --pds-color-expansion-panel-open: #282839;
92
100
  --pds-color-foreground-default: #ffffff;
93
101
  --pds-color-foreground-reverse: #1d1d29;
94
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
95
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
96
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
97
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
102
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
103
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
104
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
105
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
98
106
  --pds-color-input-action-background-hover: #504e62;
99
107
  --pds-color-input-background-critical: #1d1d29;
100
108
  --pds-color-input-background-default: #1d1d29;
@@ -116,13 +124,13 @@
116
124
  --pds-color-interactive-link: #36a3ff;
117
125
  --pds-color-interactive-reverse-focus: #36a3ff;
118
126
  --pds-color-interactive-reverse-link: #36a3ff;
119
- --pds-color-link-active: #6f54e8;
127
+ --pds-color-link-active: #8a70ff;
120
128
  --pds-color-link-cta-active: #d0c6ff;
121
129
  --pds-color-link-cta-default: #8a70ff;
122
130
  --pds-color-link-cta-hover: #ad9bff;
123
131
  --pds-color-link-default: #36a3ff;
124
- --pds-color-link-hover: #6f54e8;
125
- --pds-color-link-visited: #6f54e8;
132
+ --pds-color-link-hover: #8a70ff;
133
+ --pds-color-link-visited: #8a70ff;
126
134
  --pds-color-menu-background: #282839;
127
135
  --pds-color-menu-item-background-active: #858299;
128
136
  --pds-color-menu-item-background-default: #282839;
@@ -146,7 +154,7 @@
146
154
  --pds-color-semantic-success-foreground: #2abb7f;
147
155
  --pds-color-semantic-warning-background: #3d2e00;
148
156
  --pds-color-semantic-warning-foreground: #cf9f02;
149
- --pds-color-table-sort-arrow-active: #6f54e8;
157
+ --pds-color-table-sort-arrow-active: #8a70ff;
150
158
  --pds-color-table-sort-arrow-inactive: #a6a3b4;
151
159
  --pds-color-tabs-accent: #ad9bff;
152
160
  --pds-color-tag-1-background: #705e00;
@@ -156,7 +164,7 @@
156
164
  --pds-color-tag-3-background: #560039;
157
165
  --pds-color-tag-3-foreground: #ffe5f6;
158
166
  --pds-color-tag-4-background: #504e62;
159
- --pds-color-tag-4-foreground: #c7c5d0;
167
+ --pds-color-tag-4-foreground: #e7e7eb;
160
168
  --pds-color-tag-5-background: #700000;
161
169
  --pds-color-tag-5-foreground: #ffebeb;
162
170
  --pds-color-tag-6-background: #b15902;
@@ -172,11 +180,11 @@
172
180
  --pds-color-tile-background-hover: #504e62;
173
181
  --pds-color-tile-separator: #504e62;
174
182
  --pds-color-toggle-button-background-off: #504e62;
175
- --pds-color-toggle-button-foreground-off: #c7c5d0;
183
+ --pds-color-toggle-button-foreground-off: #e7e7eb;
176
184
  --pds-color-tooltip-background: #a6a3b4;
177
185
  --pds-color-tooltip-text: #121219;
178
186
  --pds-color-tooltip-trigger-icon-critical: #ca3521;
179
- --pds-color-tooltip-trigger-icon-default: #c7c5d0;
187
+ --pds-color-tooltip-trigger-icon-default: #e7e7eb;
180
188
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
181
189
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
182
190
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -21,6 +21,14 @@
21
21
  --pds-color-badge-status-info: var(--pds-color-semantic-info-foreground);
22
22
  --pds-color-badge-status-success: var(--pds-color-semantic-success-foreground);
23
23
  --pds-color-badge-status-warning: var(--pds-color-semantic-warning-foreground);
24
+ --pds-color-badge-tier-diamond-background: #f0fdff;
25
+ --pds-color-badge-tier-diamond-foreground: var(--pds-color-brand-secondary-300);
26
+ --pds-color-badge-tier-gold-background: #fff1a9;
27
+ --pds-color-badge-tier-gold-foreground: var(--pds-color-brand-primary-600);
28
+ --pds-color-badge-tier-platinum-background: #f0ecff;
29
+ --pds-color-badge-tier-platinum-foreground: #3017a1;
30
+ --pds-color-badge-tier-silver-background: #f1f1f1;
31
+ --pds-color-badge-tier-silver-foreground: var(--pds-color-text-default-secondary);
24
32
  --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
25
33
  --pds-color-banner-critical-foreground: #ffffff;
26
34
  --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
@@ -91,10 +99,10 @@
91
99
  --pds-color-expansion-panel-open: #f1f1f1;
92
100
  --pds-color-foreground-default: #23232d;
93
101
  --pds-color-foreground-reverse: #ffffff;
94
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
95
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
96
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
97
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
102
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
103
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
104
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
105
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
98
106
  --pds-color-input-action-background-hover: #f8f8f8;
99
107
  --pds-color-input-background-critical: #ffedeb;
100
108
  --pds-color-input-background-default: #ffffff;
@@ -116,13 +124,13 @@
116
124
  --pds-color-interactive-link: #0f62fe;
117
125
  --pds-color-interactive-reverse-focus: #36a3ff;
118
126
  --pds-color-interactive-reverse-link: #36a3ff;
119
- --pds-color-link-active: #6f54e8;
127
+ --pds-color-link-active: #5f41e5;
120
128
  --pds-color-link-cta-active: #11005d;
121
129
  --pds-color-link-cta-default: #3017a1;
122
130
  --pds-color-link-cta-hover: #5f41e5;
123
131
  --pds-color-link-default: #0f62fe;
124
- --pds-color-link-hover: #6f54e8;
125
- --pds-color-link-visited: #6f54e8;
132
+ --pds-color-link-hover: #5f41e5;
133
+ --pds-color-link-visited: #5f41e5;
126
134
  --pds-color-menu-background: #ffffff;
127
135
  --pds-color-menu-item-background-active: #f1f1f1;
128
136
  --pds-color-menu-item-background-default: #ffffff;
@@ -155,7 +163,7 @@
155
163
  --pds-color-semantic-success-foreground: #218c5f;
156
164
  --pds-color-semantic-warning-background: #fff7d6;
157
165
  --pds-color-semantic-warning-foreground: #d97008;
158
- --pds-color-table-sort-arrow-active: #6f54e8;
166
+ --pds-color-table-sort-arrow-active: #5f41e5;
159
167
  --pds-color-table-sort-arrow-inactive: #cfcfd3;
160
168
  --pds-color-tabs-accent: #5f41e5;
161
169
  --pds-color-tag-1-background: #fffbe9;