@salesforcedevs/dx-css-variables 0.4.1-remediation.1 → 0.4.1

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/assets/css/colors/brand.css +123 -124
  2. package/assets/css/colors/content-type.css +18 -18
  3. package/assets/css/colors/dark.css +35 -35
  4. package/assets/css/colors/primitives.css +172 -151
  5. package/assets/css/colors/semantic.css +41 -44
  6. package/assets/css/colors.css +0 -1
  7. package/assets/css/index.css +0 -1
  8. package/package.json +1 -1
  9. package/assets/css/colors/aliases.css +0 -188
package/assets/css/colors/brand.css CHANGED
@@ -6,184 +6,183 @@
6
6
 
7
7
  /* DEFAULT THEME (BRANDLESS) */
8
8
  --dx-g-brand-default-color-background: white;
9
- --dx-g-brand-default-button-color-background-inactive: var(--dx-g-neutral-95);
10
- --dx-g-brand-default-button-color-background-active: var(--dx-g-blue-95);
11
- --dx-g-brand-default-color: var(--dx-g-blue-40);
12
- --dx-g-brand-default-color-border: var(--dx-g-neutral-95);
13
- --dx-g-brand-default-color-background-2: var(--dx-g-blue-95);
14
- --dx-g-brand-default-button-color-background-inactive-hover: var(--dx-g-neutral-90);
15
- --dx-g-brand-default-color-border-2: var(--dx-g-neutral-90);
9
+ --dx-g-brand-default-button-color-background-inactive: var(--dx-g-gray-95);
10
+ --dx-g-brand-default-button-color-background-active: var(--dx-g-cloud-blue-vibrant-95);
11
+ --dx-g-brand-default-color: var(--dx-g-blue-vibrant-40);
12
+ --dx-g-brand-default-color-border: var(--dx-g-gray-95);
13
+ --dx-g-brand-default-color-background-2: var(--dx-g-cloud-blue-vibrant-95);
14
+ --dx-g-brand-default-button-color-background-inactive-hover: var(--dx-g-gray-90);
15
+ --dx-g-brand-default-color-border-2: var(--dx-g-gray-90);
16
16
  /* EMPLOYEES */
17
- --dx-g-brand-employees-color-background: var(--dx-g-hot-orange-95);
18
- --dx-g-brand-employees-button-color-background-inactive: var(--dx-g-hot-orange-90);
19
- --dx-g-brand-employees-button-color-background-active: var(--dx-g-hot-orange-65);
20
- --dx-g-brand-employees-color: var(--dx-g-hot-orange-15);
21
- --dx-g-brand-employees-color-border: var(--dx-g-hot-orange-90);
17
+ --dx-g-brand-employees-color-background: var(--dx-g-hot-orange-vibrant-95);
18
+ --dx-g-brand-employees-button-color-background-inactive: var(--dx-g-hot-orange-vibrant-90);
19
+ --dx-g-brand-employees-button-color-background-active: var(--dx-g-hot-orange-vibrant-65);
20
+ --dx-g-brand-employees-color: var(--dx-g-hot-orange-vibrant-15);
21
+ --dx-g-brand-employees-color-border: var(--dx-g-hot-orange-vibrant-90);
22
22
  --dx-g-brand-employees-color-background-2: white;
23
- --dx-g-brand-employees-button-color-background-inactive-hover: var(--dx-g-hot-orange-80);
24
- --dx-g-brand-employees-color-border-2: var(--dx-g-hot-orange-80);
23
+ --dx-g-brand-employees-button-color-background-inactive-hover: var(--dx-g-hot-orange-vibrant-80);
24
+ --dx-g-brand-employees-color-border-2: var(--dx-g-hot-orange-vibrant-80);
25
25
 
26
26
  /* MARKETING */
27
- --dx-g-brand-marketing-color-background: var(--dx-g-orange-95);
28
- --dx-g-brand-marketing-button-color-background-inactive: var(--dx-g-orange-90);
29
- --dx-g-brand-marketing-button-color-background-active: var(--dx-g-orange-70);
30
- --dx-g-brand-marketing-color: var(--dx-g-orange-20);
31
- --dx-g-brand-marketing-color-border: var(--dx-g-orange-90);
27
+ --dx-g-brand-marketing-color-background: var(--dx-g-orange-vibrant-95);
28
+ --dx-g-brand-marketing-button-color-background-inactive: var(--dx-g-orange-vibrant-90);
29
+ --dx-g-brand-marketing-button-color-background-active: var(--dx-g-orange-vibrant-70);
30
+ --dx-g-brand-marketing-color: var(--dx-g-orange-vibrant-20);
31
+ --dx-g-brand-marketing-color-border: var(--dx-g-orange-vibrant-90);
32
32
  --dx-g-brand-marketing-color-background-2: white;
33
- --dx-g-brand-marketing-button-color-background-inactive-hover: var(--dx-g-orange-80);
34
- --dx-g-brand-marketing-color-border-2: var(--dx-g-orange-80);
33
+ --dx-g-brand-marketing-button-color-background-inactive-hover: var(--dx-g-orange-vibrant-80);
34
+ --dx-g-brand-marketing-color-border-2: var(--dx-g-orange-vibrant-80);
35
35
 
36
36
  /* PARTNERS */
37
- --dx-g-brand-partners-color-background: var(--dx-g-yellow-95);
38
- --dx-g-brand-partners-button-color-background-inactive: var(--dx-g-yellow-90);
39
- --dx-g-brand-partners-button-color-background-active: var(--dx-g-yellow-80);
40
- --dx-g-brand-partners-color: var(--dx-g-yellow-20);
41
- --dx-g-brand-partners-color-border: var(--dx-g-yellow-90);
37
+ --dx-g-brand-partners-color-background: var(--dx-g-yellow-vibrant-95);
38
+ --dx-g-brand-partners-button-color-background-inactive: var(--dx-g-yellow-vibrant-90);
39
+ --dx-g-brand-partners-button-color-background-active: var(--dx-g-yellow-vibrant-80);
40
+ --dx-g-brand-partners-color: var(--dx-g-yellow-vibrant-20);
41
+ --dx-g-brand-partners-color-border: var(--dx-g-yellow-vibrant-90);
42
42
  --dx-g-brand-partners-color-background-2: white;
43
43
  --dx-g-brand-partners-button-color-background-inactive-hover: var(--dx-g-yellow-natural-90);
44
- --dx-g-brand-partners-color-border-2: var(--dx-g-yellow-80);
44
+ --dx-g-brand-partners-color-border-2: var(--dx-g-yellow-vibrant-80);
45
45
 
46
46
  /* COMMERCE */
47
- --dx-g-brand-commerce-color-background: var(--dx-g-green-90);
48
- --dx-g-brand-commerce-button-color-background-inactive: var(--dx-g-green-90);
49
- --dx-g-brand-commerce-button-color-background-active: var(--dx-g-green-65);
50
- --dx-g-brand-commerce-color: var(--dx-g-green-15);
51
- --dx-g-brand-commerce-color-border: var(--dx-g-green-90);
47
+ --dx-g-brand-commerce-color-background: var(--dx-g-green-vibrant-90);
48
+ --dx-g-brand-commerce-button-color-background-inactive: var(--dx-g-green-vibrant-90);
49
+ --dx-g-brand-commerce-button-color-background-active: var(--dx-g-green-vibrant-65);
50
+ --dx-g-brand-commerce-color: var(--dx-g-green-vibrant-15);
51
+ --dx-g-brand-commerce-color-border: var(--dx-g-green-vibrant-90);
52
52
  --dx-g-brand-commerce-color-background-2: white;
53
- --dx-g-brand-commerce-button-color-background-inactive-hover: var(--dx-g-green-80);
54
- --dx-g-brand-commerce-color-border-2: var(--dx-g-green-80);
53
+ --dx-g-brand-commerce-button-color-background-inactive-hover: var(--dx-g-green-vibrant-80);
54
+ --dx-g-brand-commerce-color-border-2: var(--dx-g-green-vibrant-80);
55
55
 
56
56
  /* REVENUE */
57
- --dx-g-brand-revenue-color-background: var(--dx-g-teal-95);
58
- --dx-g-brand-revenue-button-color-background-inactive: var(--dx-g-teal-90);
59
- --dx-g-brand-revenue-button-color-background-active: var(--dx-g-teal-80);
60
- --dx-g-brand-revenue-color: var(--dx-g-teal-20);
61
- --dx-g-brand-revenue-color-border: var(--dx-g-teal-90);
57
+ --dx-g-brand-revenue-color-background: var(--dx-g-teal-vibrant-95);
58
+ --dx-g-brand-revenue-button-color-background-inactive: var(--dx-g-teal-vibrant-90);
59
+ --dx-g-brand-revenue-button-color-background-active: var(--dx-g-teal-vibrant-80);
60
+ --dx-g-brand-revenue-color: var(--dx-g-teal-vibrant-20);
61
+ --dx-g-brand-revenue-color-border: var(--dx-g-teal-vibrant-90);
62
62
  --dx-g-brand-revenue-color-background-2: white;
63
63
  --dx-g-brand-revenue-button-color-background-inactive-hover: var(--dx-g-teal-natural-90);
64
- --dx-g-brand-revenue-color-border-2: var(--dx-g-teal-80);
64
+ --dx-g-brand-revenue-color-border-2: var(--dx-g-teal-vibrant-80);
65
65
 
66
66
  /* SALES */
67
- --dx-g-brand-sales-color-background: var(--dx-g-teal-95);
68
- --dx-g-brand-sales-button-color-background-inactive: var(--dx-g-teal-90);
69
- --dx-g-brand-sales-button-color-background-active: var(--dx-g-teal-80);
70
- --dx-g-brand-sales-color: var(--dx-g-teal-20);
71
- --dx-g-brand-sales-color-border: var(--dx-g-teal-90);
67
+ --dx-g-brand-sales-color-background: var(--dx-g-teal-vibrant-95);
68
+ --dx-g-brand-sales-button-color-background-inactive: var(--dx-g-teal-vibrant-90);
69
+ --dx-g-brand-sales-button-color-background-active: var(--dx-g-teal-vibrant-80);
70
+ --dx-g-brand-sales-color: var(--dx-g-teal-vibrant-20);
71
+ --dx-g-brand-sales-color-border: var(--dx-g-teal-vibrant-90);
72
72
  --dx-g-brand-sales-color-background-2: white;
73
- --dx-g-brand-sales-button-color-background-inactive-hover: var(--dx-g-teal-90);
74
- --dx-g-brand-sales-color-border-2: var(--dx-g-teal-80);
73
+ --dx-g-brand-sales-button-color-background-inactive-hover: var(--dx-g-teal-vibrant-90);
74
+ --dx-g-brand-sales-color-border-2: var(--dx-g-teal-vibrant-80);
75
75
 
76
76
  /* SUCCESS */
77
- --dx-g-brand-success-color-background: var(--dx-g-blue-95);
78
- --dx-g-brand-success-button-color-background-inactive: var(--dx-g-blue-80);
79
- --dx-g-brand-success-button-color-background-active: var(--dx-g-blue-80);
80
- --dx-g-brand-success-color: var(--dx-g-blue-20);
81
- --dx-g-brand-success-color-border: var(--dx-g-blue-90);
77
+ --dx-g-brand-success-color-background: var(--dx-g-cloud-blue-vibrant-95);
78
+ --dx-g-brand-success-button-color-background-inactive: var(--dx-g-cloud-blue-vibrant-80);
79
+ --dx-g-brand-success-button-color-background-active: var(--dx-g-cloud-blue-vibrant-80);
80
+ --dx-g-brand-success-color: var(--dx-g-cloud-blue-vibrant-20);
81
+ --dx-g-brand-success-color-border: var(--dx-g-cloud-blue-vibrant-90);
82
82
  --dx-g-brand-success-color-background-2: white;
83
- --dx-g-brand-success-button-color-background-inactive-hover: var(--dx-g-blue-90);
84
- --dx-g-brand-success-color-border-2: var(--dx-g-blue-80);
83
+ --dx-g-brand-success-button-color-background-inactive-hover: var(--dx-g-cloud-blue-vibrant-90);
84
+ --dx-g-brand-success-color-border-2: var(--dx-g-cloud-blue-vibrant-80);
85
85
 
86
86
  /* EXPERIENCE */
87
- --dx-g-brand-experience-color-background: var(--dx-g-blue-95);
88
- --dx-g-brand-experience-button-color-background-inactive: var(--dx-g-blue-80);
89
- --dx-g-brand-experience-button-color-background-active: var(--dx-g-blue-80);
90
- --dx-g-brand-experience-color: var(--dx-g-blue-20);
91
- --dx-g-brand-experience-color-border: var(--dx-g-blue-90);
87
+ --dx-g-brand-experience-color-background: var(--dx-g-cloud-blue-vibrant-95);
88
+ --dx-g-brand-experience-button-color-background-inactive: var(--dx-g-cloud-blue-vibrant-80);
89
+ --dx-g-brand-experience-button-color-background-active: var(--dx-g-cloud-blue-vibrant-80);
90
+ --dx-g-brand-experience-color: var(--dx-g-cloud-blue-vibrant-20);
91
+ --dx-g-brand-experience-color-border: var(--dx-g-cloud-blue-vibrant-90);
92
92
  --dx-g-brand-experience-color-background-2: white;
93
- --dx-g-brand-experience-button-color-background-inactive-hover: var(--dx-g-blue-90);
94
- --dx-g-brand-experience-color-border-2: var(--dx-g-blue-80);
93
+ --dx-g-brand-experience-button-color-background-inactive-hover: var(--dx-g-cloud-blue-vibrant-90);
94
+ --dx-g-brand-experience-color-border-2: var(--dx-g-cloud-blue-vibrant-80);
95
95
 
96
96
  /* INTEGRATION */
97
- --dx-g-brand-integration-color-background: var(--dx-g-blue-95);
98
- --dx-g-brand-integration-button-color-background-inactive: var(--dx-g-blue-80);
99
- --dx-g-brand-integration-button-color-background-active: var(--dx-g-blue-80);
100
- --dx-g-brand-integration-color: var(--dx-g-blue-20);
101
- --dx-g-brand-integration-color-border: var(--dx-g-blue-90);
97
+ --dx-g-brand-integration-color-background: var(--dx-g-cloud-blue-vibrant-95);
98
+ --dx-g-brand-integration-button-color-background-inactive: var(--dx-g-cloud-blue-vibrant-80);
99
+ --dx-g-brand-integration-button-color-background-active: var(--dx-g-cloud-blue-vibrant-80);
100
+ --dx-g-brand-integration-color: var(--dx-g-cloud-blue-vibrant-20);
101
+ --dx-g-brand-integration-color-border: var(--dx-g-cloud-blue-vibrant-90);
102
102
  --dx-g-brand-integration-color-background-2: white;
103
- --dx-g-brand-integration-button-color-background-inactive-hover: var(--dx-g-blue-90);
104
- --dx-g-brand-integration-color-border-2: var(--dx-g-blue-80);
103
+ --dx-g-brand-integration-button-color-background-inactive-hover: var(--dx-g-cloud-blue-vibrant-90);
104
+ --dx-g-brand-integration-color-border-2: var(--dx-g-cloud-blue-vibrant-80);
105
105
 
106
106
  /* PLATFORM */
107
- --dx-g-brand-platform-color-background: var(--dx-g-indigo-95);
108
- --dx-g-brand-platform-button-color-background-inactive: var(--dx-g-indigo-80);
109
- --dx-g-brand-platform-button-color-background-active: var(--dx-g-indigo-80);
110
- --dx-g-brand-platform-color: var(--dx-g-indigo-20);
111
- --dx-g-brand-platform-color-border: var(--dx-g-indigo-90);
107
+ --dx-g-brand-platform-color-background: var(--dx-g-indigo-vibrant-95);
108
+ --dx-g-brand-platform-button-color-background-inactive: var(--dx-g-indigo-vibrant-80);
109
+ --dx-g-brand-platform-button-color-background-active: var(--dx-g-indigo-vibrant-80);
110
+ --dx-g-brand-platform-color: var(--dx-g-indigo-vibrant-20);
111
+ --dx-g-brand-platform-color-border: var(--dx-g-indigo-vibrant-90);
112
112
  --dx-g-brand-platform-color-background-2: white;
113
- --dx-g-brand-platform-button-color-background-inactive-hover: var(--dx-g-indigo-90);
114
- --dx-g-brand-platform-color-border-2: var(--dx-g-indigo-80);
113
+ --dx-g-brand-platform-button-color-background-inactive-hover: var(--dx-g-indigo-vibrant-90);
114
+ --dx-g-brand-platform-color-border-2: var(--dx-g-indigo-vibrant-80);
115
115
 
116
116
  /* DATA CLOUD */
117
- --dx-g-brand-data-color-background: var(--dx-g-indigo-95);
118
- --dx-g-brand-data-button-color-background-inactive: var(--dx-g-indigo-80);
119
- --dx-g-brand-data-button-color-background-active: var(--dx-g-indigo-80);
120
- --dx-g-brand-data-color: var(--dx-g-indigo-20);
121
- --dx-g-brand-data-color-border: var(--dx-g-indigo-90);
117
+ --dx-g-brand-data-color-background: var(--dx-g-indigo-vibrant-95);
118
+ --dx-g-brand-data-button-color-background-inactive: var(--dx-g-indigo-vibrant-80);
119
+ --dx-g-brand-data-button-color-background-active: var(--dx-g-indigo-vibrant-80);
120
+ --dx-g-brand-data-color: var(--dx-g-indigo-vibrant-20);
121
+ --dx-g-brand-data-color-border: var(--dx-g-indigo-vibrant-90);
122
122
  --dx-g-brand-data-color-background-2: white;
123
- --dx-g-brand-data-button-color-background-inactive-hover: var(--dx-g-indigo-90);
124
- --dx-g-brand-data-color-border-2: var(--dx-g-indigo-80);
123
+ --dx-g-brand-data-button-color-background-inactive-hover: var(--dx-g-indigo-vibrant-90);
124
+ --dx-g-brand-data-color-border-2: var(--dx-g-indigo-vibrant-80);
125
125
 
126
126
  /* INDUSTRIES */
127
- --dx-g-brand-industries-color-background: var(--dx-g-violet-95);
128
- --dx-g-brand-industries-button-color-background-inactive: var(--dx-g-violet-90);
129
- --dx-g-brand-industries-button-color-background-active: var(--dx-g-violet-70);
130
- --dx-g-brand-industries-color: var(--dx-g-violet-20);
131
- --dx-g-brand-industries-color-border: var(--dx-g-violet-90);
127
+ --dx-g-brand-industries-color-background: var(--dx-g-violet-vibrant-95);
128
+ --dx-g-brand-industries-button-color-background-inactive: var(--dx-g-violet-vibrant-90);
129
+ --dx-g-brand-industries-button-color-background-active: var(--dx-g-violet-vibrant-70);
130
+ --dx-g-brand-industries-color: var(--dx-g-violet-vibrant-20);
131
+ --dx-g-brand-industries-color-border: var(--dx-g-violet-vibrant-90);
132
132
  --dx-g-brand-industries-color-background-2: white;
133
- --dx-g-brand-industries-button-color-background-inactive-hover: var(--dx-g-violet-90);
134
- --dx-g-brand-industries-color-border-2: var(--dx-g-violet-80);
133
+ --dx-g-brand-industries-button-color-background-inactive-hover: var(--dx-g-violet-vibrant-90);
134
+ --dx-g-brand-industries-color-border-2: var(--dx-g-violet-vibrant-80);
135
135
 
136
136
  /* LEARNING */
137
- --dx-g-brand-learning-color-background: var(--dx-g-violet-95);
138
- --dx-g-brand-learning-button-color-background-inactive: var(--dx-g-violet-90);
139
- --dx-g-brand-learning-button-color-background-active: var(--dx-g-violet-70);
140
- --dx-g-brand-learning-color: var(--dx-g-violet-20);
141
- --dx-g-brand-learning-color-border: var(--dx-g-violet-90);
137
+ --dx-g-brand-learning-color-background: var(--dx-g-violet-vibrant-95);
138
+ --dx-g-brand-learning-button-color-background-inactive: var(--dx-g-violet-vibrant-90);
139
+ --dx-g-brand-learning-button-color-background-active: var(--dx-g-violet-vibrant-70);
140
+ --dx-g-brand-learning-color: var(--dx-g-violet-vibrant-20);
141
+ --dx-g-brand-learning-color-border: var(--dx-g-violet-vibrant-90);
142
142
  --dx-g-brand-learning-color-background-2: white;
143
- --dx-g-brand-learning-button-color-background-inactive-hover: var(--dx-g-violet-90);
144
- --dx-g-brand-learning-color-border-2: var(--dx-g-violet-80);
143
+ --dx-g-brand-learning-button-color-background-inactive-hover: var(--dx-g-violet-vibrant-90);
144
+ --dx-g-brand-learning-color-border-2: var(--dx-g-violet-vibrant-80);
145
145
 
146
146
  /* SERVICE */
147
- --dx-g-brand-service-color-background: var(--dx-g-pink-95);
148
- --dx-g-brand-service-button-color-background-inactive: var(--dx-g-pink-90);
149
- --dx-g-brand-service-button-color-background-active: var(--dx-g-pink-65);
150
- --dx-g-brand-service-color: var(--dx-g-pink-15);
151
- --dx-g-brand-service-color-border: var(--dx-g-pink-90);
147
+ --dx-g-brand-service-color-background: var(--dx-g-pink-vibrant-95);
148
+ --dx-g-brand-service-button-color-background-inactive: var(--dx-g-pink-vibrant-90);
149
+ --dx-g-brand-service-button-color-background-active: var(--dx-g-pink-vibrant-65);
150
+ --dx-g-brand-service-color: var(--dx-g-pink-vibrant-15);
151
+ --dx-g-brand-service-color-border: var(--dx-g-pink-vibrant-90);
152
152
  --dx-g-brand-service-color-background-2: white;
153
- --dx-g-brand-service-button-color-background-inactive-hover: var(--dx-g-pink-80);
154
- --dx-g-brand-service-color-border-2: var(--dx-g-pink-80);
153
+ --dx-g-brand-service-button-color-background-inactive-hover: var(--dx-g-pink-vibrant-80);
154
+ --dx-g-brand-service-color-border-2: var(--dx-g-pink-vibrant-80);
155
155
 
156
156
  /* ANALYTICS */
157
- --dx-g-brand-analytics-color-background: var(--dx-g-blue-95);
158
- --dx-g-brand-analytics-button-color-background-inactive: var(--dx-g-blue-95);
159
- --dx-g-brand-analytics-button-color-background-active: var(--dx-g-blue-80);
160
- --dx-g-brand-analytics-color: var(--dx-g-blue-20);
161
- --dx-g-brand-analytics-color-border: var(--dx-g-blue-90);
157
+ --dx-g-brand-analytics-color-background: var(--dx-g-blue-vibrant-95);
158
+ --dx-g-brand-analytics-button-color-background-inactive: var(--dx-g-blue-vibrant-95);
159
+ --dx-g-brand-analytics-button-color-background-active: var(--dx-g-blue-vibrant-80);
160
+ --dx-g-brand-analytics-color: var(--dx-g-blue-vibrant-20);
161
+ --dx-g-brand-analytics-color-border: var(--dx-g-blue-vibrant-90);
162
162
  --dx-g-brand-analytics-color-background-2: white;
163
- --dx-g-brand-analytics-button-color-background-inactive-hover: var(--dx-g-blue-90);
164
- --dx-g-brand-analytics-color-border-2: var(--dx-g-blue-80);
163
+ --dx-g-brand-analytics-button-color-background-inactive-hover: var(--dx-g-blue-vibrant-90);
164
+ --dx-g-brand-analytics-color-border-2: var(--dx-g-blue-vibrant-80);
165
165
 
166
166
  /* COLLABORATION */
167
- --dx-g-brand-collaboration-color-background: var(--dx-g-teal-95);
168
- --dx-g-brand-collaboration-button-color-background-inactive: var(--dx-g-teal-90);
169
- --dx-g-brand-collaboration-button-color-background-active: var(--dx-g-teal-80);
170
- --dx-g-brand-collaboration-color: var(--dx-g-teal-20);
171
- --dx-g-brand-collaboration-color-border: var(--dx-g-teal-90);
167
+ --dx-g-brand-collaboration-color-background: var(--dx-g-teal-vibrant-95);
168
+ --dx-g-brand-collaboration-button-color-background-inactive: var(--dx-g-teal-vibrant-90);
169
+ --dx-g-brand-collaboration-button-color-background-active: var(--dx-g-teal-vibrant-80);
170
+ --dx-g-brand-collaboration-color: var(--dx-g-teal-vibrant-20);
171
+ --dx-g-brand-collaboration-color-border: var(--dx-g-teal-vibrant-90);
172
172
  --dx-g-brand-collaboration-color-background-2: white;
173
173
  --dx-g-brand-collaboration-button-color-background-inactive-hover: var(--dx-g-teal-natural-90);
174
- --dx-g-brand-collaboration-color-border-2: var(--dx-g-teal-80);
174
+ --dx-g-brand-collaboration-color-border-2: var(--dx-g-teal-vibrant-80);
175
175
 
176
176
  /* HEROKU */
177
- --dx-g-brand-heroku-color-background: var(--dx-g-purple-95);
178
- --dx-g-brand-heroku-button-color-background-inactive: var(--dx-g-purple-90);
179
- --dx-g-brand-heroku-button-color-background-active: var(--dx-g-purple-70);
180
- --dx-g-brand-heroku-color: var(--dx-g-purple-20);
181
- --dx-g-brand-heroku-color-border: var(--dx-g-purple-90);
177
+ --dx-g-brand-heroku-color-background: var(--dx-g-purple-vibrant-95);
178
+ --dx-g-brand-heroku-button-color-background-inactive: var(--dx-g-purple-vibrant-90);
179
+ --dx-g-brand-heroku-button-color-background-active: var(--dx-g-purple-vibrant-70);
180
+ --dx-g-brand-heroku-color: var(--dx-g-purple-vibrant-20);
181
+ --dx-g-brand-heroku-color-border: var(--dx-g-purple-vibrant-90);
182
182
  --dx-g-brand-heroku-color-background-2: white;
183
- --dx-g-brand-heroku-button-color-background-inactive-hover: var(--dx-g-purple-90);
184
- --dx-g-brand-heroku-color-border-2: var(--dx-g-purple-80);
183
+ --dx-g-brand-heroku-button-color-background-inactive-hover: var(--dx-g-purple-vibrant-90);
184
+ --dx-g-brand-heroku-color-border-2: var(--dx-g-purple-vibrant-80);
185
185
 
186
186
  /* SLACK */
187
- /* stylelint-disable-next-line function-disallowed-list -- leftover raw color; fix in a later item, not Q-tier-lint */
188
187
  --dx-g-brand-slack-color-background: rgba(74, 21, 75, 1);
189
188
  }
package/assets/css/colors/content-type.css CHANGED
@@ -5,42 +5,42 @@
5
5
  /* ------ */
6
6
 
7
7
  /* DOCUMENTATION */
8
- --dx-g-content-type-documentation-color: var(--dx-g-blue-40);
9
- --dx-g-content-type-documentation-color-background: var(--dx-g-blue-95);
8
+ --dx-g-content-type-documentation-color: var(--dx-g-blue-vibrant-40);
9
+ --dx-g-content-type-documentation-color-background: var(--dx-g-blue-vibrant-95);
10
10
 
11
11
  /* HELP_DOCUMENTATION */
12
- --dx-g-content-type-help_documentation-color: var(--dx-g-blue-40);
13
- --dx-g-content-type-help_documentation-color-background: var(--dx-g-blue-95);
12
+ --dx-g-content-type-help_documentation-color: var(--dx-g-blue-vibrant-40);
13
+ --dx-g-content-type-help_documentation-color-background: var(--dx-g-blue-vibrant-95);
14
14
 
15
15
  /* TRAILHEAD */
16
16
  --dx-g-content-type-trailhead-color: var(--dx-g-brand-learning-color);
17
17
  --dx-g-content-type-trailhead-color-background: var(--dx-g-brand-learning-color-background);
18
18
 
19
19
  /* BLOG */
20
- --dx-g-content-type-blog-color: var(--dx-g-teal-40);
21
- --dx-g-content-type-blog-color-background: var(--dx-g-teal-95);
20
+ --dx-g-content-type-blog-color: var(--dx-g-teal-vibrant-40);
21
+ --dx-g-content-type-blog-color-background: var(--dx-g-teal-vibrant-95);
22
22
 
23
23
  /* FORUM */
24
- --dx-g-content-type-forum-color: var(--dx-g-yellow-40);
25
- --dx-g-content-type-forum-color-background: var(--dx-g-yellow-95);
24
+ --dx-g-content-type-forum-color: var(--dx-g-yellow-vibrant-40);
25
+ --dx-g-content-type-forum-color-background: var(--dx-g-yellow-vibrant-95);
26
26
 
27
27
  /* API */
28
- --dx-g-content-type-api-color: var(--dx-g-pink-40);
29
- --dx-g-content-type-api-color-background: var(--dx-g-pink-95);
28
+ --dx-g-content-type-api-color: var(--dx-g-pink-vibrant-40);
29
+ --dx-g-content-type-api-color-background: var(--dx-g-pink-vibrant-95);
30
30
 
31
31
  /* EVENT */
32
- --dx-g-content-type-event-color: var(--dx-g-red-40);
33
- --dx-g-content-type-event-color-background: var(--dx-g-red-95);
32
+ --dx-g-content-type-event-color: var(--dx-g-red-vibrant-40);
33
+ --dx-g-content-type-event-color-background: var(--dx-g-red-vibrant-95);
34
34
 
35
35
  /* WEBSITE */
36
- --dx-g-content-type-website-color: var(--dx-g-indigo-40);
37
- --dx-g-content-type-website-color-background: var(--dx-g-indigo-95);
36
+ --dx-g-content-type-website-color: var(--dx-g-indigo-vibrant-40);
37
+ --dx-g-content-type-website-color-background: var(--dx-g-indigo-vibrant-95);
38
38
 
39
39
  /* PODCAST */
40
- --dx-g-content-type-podcast-color: var(--dx-g-purple-40);
41
- --dx-g-content-type-podcast-color-background: var(--dx-g-purple-95);
40
+ --dx-g-content-type-podcast-color: var(--dx-g-purple-vibrant-40);
41
+ --dx-g-content-type-podcast-color-background: var(--dx-g-purple-vibrant-95);
42
42
 
43
43
  /* COMMUNITY */
44
- --dx-g-content-type-community_posts-color: var(--dx-g-blue-40);
45
- --dx-g-content-type-community_posts-color-background: var(--dx-g-blue-95);
44
+ --dx-g-content-type-community_posts-color: var(--dx-g-cloud-blue-vibrant-40);
45
+ --dx-g-content-type-community_posts-color-background: var(--dx-g-cloud-blue-vibrant-95);
46
46
  }
package/assets/css/colors/dark.css CHANGED
@@ -1,42 +1,42 @@
1
1
  /* Dark-mode overrides for semantic color tokens. */
2
2
  body.dark {
3
- --dx-g-body-background-color: var(--dx-g-blue-10);
3
+ --dx-g-body-background-color: var(--dx-g-blue-vibrant-10);
4
4
  --dx-g-hr-font-color: white;
5
5
 
6
6
  --dx-g-text-label-color: white;
7
7
  --dx-g-text-heading-color: white;
8
8
  --dx-g-text-body-color: white;
9
- --dx-g-code-text-color: var(--dx-g-neutral-10);
10
- --dx-g-code-background-color: var(--dx-g-neutral-95);
11
- --dx-g-link-hover-color: var(--dx-g-blue-80);
12
- --dx-g-social-svg-icon-color: var(--dx-g-blue-10);
9
+ --dx-g-code-text-color: var(--dx-g-gray-10);
10
+ --dx-g-code-background-color: var(--dx-g-gray-95);
11
+ --dx-g-link-hover-color: var(--dx-g-blue-vibrant-80);
12
+ --dx-g-social-svg-icon-color: var(--dx-g-blue-vibrant-10);
13
13
  --dx-g-social-svg-background-color: white;
14
- --dx-g-social-svg-hover-color: var(--dx-g-blue-80);
15
- --dx-card-title-hover-color: var(--dx-g-blue-80);
14
+ --dx-g-social-svg-hover-color: var(--dx-g-blue-vibrant-80);
15
+ --dx-card-title-hover-color: var(--dx-g-blue-vibrant-80);
16
16
 
17
- --dx-g-audio-background-color: var(--dx-g-indigo-30);
18
- --dx-g-audio-inner-div-background-color: var(--dx-g-indigo-50);
17
+ --dx-g-audio-background-color: var(--dx-g-indigo-vibrant-30);
18
+ --dx-g-audio-inner-div-background-color: var(--dx-g-indigo-vibrant-50);
19
19
  --dx-g-audio-text-color: white;
20
20
  --dx-g-audio-threedot-menu-text-color: white;
21
- --dx-g-audio-button-hover-color: var(--dx-g-blue-80);
22
- --dx-g-audio-track-before-color: var(--dx-g-indigo-70);
23
- --dx-g-audio-track-thumb-color: var(--dx-g-indigo-90);
21
+ --dx-g-audio-button-hover-color: var(--dx-g-blue-vibrant-80);
22
+ --dx-g-audio-track-before-color: var(--dx-g-indigo-vibrant-70);
23
+ --dx-g-audio-track-thumb-color: var(--dx-g-indigo-vibrant-90);
24
24
 
25
- --dx-podcast-audio-background-color: var(--dx-g-indigo-50);
26
- --dx-podcast-audio-inner-div-background-color: var(--dx-g-indigo-30);
25
+ --dx-podcast-audio-background-color: var(--dx-g-indigo-vibrant-50);
26
+ --dx-podcast-audio-inner-div-background-color: var(--dx-g-indigo-vibrant-30);
27
27
  --dx-podcast-subscription-link-color: white;
28
- --dx-podcast-host-background-color: var(--dx-g-indigo-30);
28
+ --dx-podcast-host-background-color: var(--dx-g-indigo-vibrant-30);
29
29
 
30
30
  --dx-g-blog-post-heading-color: white;
31
- --dx-g-blog-post-th-color: var(--dx-g-indigo-50);
32
- --dx-g-prose-link-color: var(--dx-g-blue-70);
31
+ --dx-g-blog-post-th-color: var(--dx-g-indigo-vibrant-50);
32
+ --dx-g-prose-link-color: var(--dx-g-blue-vibrant-70);
33
33
 
34
- --dx-g-button-primary-color: var(--dx-g-blue-50);
34
+ --dx-g-button-primary-color: var(--dx-g-blue-vibrant-50);
35
35
  --dx-g-button-icon-color: white;
36
36
  --dx-g-button-secondary-color: white;
37
- --dx-g-button-secondary-color-hover: var(--dx-g-blue-80);
37
+ --dx-g-button-secondary-color-hover: var(--dx-g-blue-vibrant-80);
38
38
  --dx-g-button-inline-color: white;
39
- --dx-g-button-inline-color-hover: var(--dx-g-blue-80);
39
+ --dx-g-button-inline-color-hover: var(--dx-g-blue-vibrant-80);
40
40
 
41
41
  --dx-g-svg-filter: brightness(100);
42
42
 
@@ -45,41 +45,41 @@ body.dark {
45
45
  --dx-g-dark-mode-toggle-icon: url("https://a.sfdcstatic.com/developer-website/images/sun-icon.png");
46
46
 
47
47
  --dx-g-light-mode-code-block-border: none;
48
- --dx-g-dark-mode-toggle-code-block-border: 1px solid var(--dx-g-blue-40);
48
+ --dx-g-dark-mode-toggle-code-block-border: 1px solid var(--dx-g-blue-vibrant-40);
49
49
 
50
- --dx-g-language-picker-background-color: var(--dx-g-indigo-50);
50
+ --dx-g-language-picker-background-color: var(--dx-g-indigo-vibrant-50);
51
51
  --dx-g-language-picker-font-color: white;
52
- --dx-g-language-picker-option-hover-color: var(--dx-g-blue-10);
52
+ --dx-g-language-picker-option-hover-color: var(--dx-g-blue-vibrant-10);
53
53
  --dx-g-language-picker-option-color: white;
54
54
  --dx-g-language-picker-checkmark-color: white;
55
55
 
56
56
  --dx-blog-grid-themed-left-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-left-dark-mode-2.svg");
57
57
  --dx-blog-grid-themed-right-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-right-dark-mode.svg");
58
58
 
59
- --dx-footer-themed-background-color: var(--dx-g-blue-20);
60
- --dx-footer-themed-top-background-color: var(--dx-g-blue-20);
61
- --dx-footer-themed-top-large-background-color: var(--dx-g-blue-10);
59
+ --dx-footer-themed-background-color: var(--dx-g-blue-vibrant-20);
60
+ --dx-footer-themed-top-background-color: var(--dx-g-blue-vibrant-20);
61
+ --dx-footer-themed-top-large-background-color: var(--dx-g-blue-vibrant-10);
62
62
  --dx-footer-themed-top-border-color: white;
63
63
  --dx-footer-themed-header-color: white;
64
64
  --dx-footer-themed-header-link-color: white;
65
- --dx-footer-themed-header-link-hover-color: var(--dx-g-blue-80);
65
+ --dx-footer-themed-header-link-hover-color: var(--dx-g-blue-vibrant-80);
66
66
  --dx-footer-themed-svg-icon-color: white;
67
- --dx-footer-themed-svg-background-color: var(--dx-g-blue-20);
68
- --dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-10);
67
+ --dx-footer-themed-svg-background-color: var(--dx-g-blue-vibrant-20);
68
+ --dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-vibrant-10);
69
69
  --dx-footer-themed-large-graphic: url('https://a.sfdcstatic.com/developer-website/images/footer_graphic_large_dark.svg');
70
70
 
71
- --dx-g-background-color: var(--dx-g-blue-10);
72
- --dx-g-title-hover-color: var(--dx-g-blue-70);
71
+ --dx-g-background-color: var(--dx-g-blue-vibrant-10);
72
+ --dx-g-title-hover-color: var(--dx-g-blue-vibrant-70);
73
73
 
74
74
  --dx-themed-featured-content-header-background-swoop: url("https://a.sfdcstatic.com/developer-website/images/swoop_dark_light.png");
75
75
  --dx-themed-featured-content-header-background-swoop-intense: url("https://a.sfdcstatic.com/developer-website/images/swoop_dark_intense.png");
76
76
  --dx-themed-featured-content-header-text-color: white;
77
77
  --dx-themed-featured-content-header-title-link-light-color: white;
78
78
  --dx-themed-featured-content-header-title-link-intense-color: white;
79
- --dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-indigo-90);
80
- --dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-90);
79
+ --dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-indigo-vibrant-90);
80
+ --dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-vibrant-90);
81
81
  --dx-themed-featured-content-header-intense-label-color: rgb(190 199 246);
82
- --dx-themed-featured-content-header-button-color: var(--dx-g-blue-50);
82
+ --dx-themed-featured-content-header-button-color: var(--dx-g-blue-vibrant-50);
83
83
  --dx-themed-featured-content-header-button-background-color: white;
84
- --dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-80);
84
+ --dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-vibrant-80);
85
85
  }
package/assets/css/colors/primitives.css CHANGED
@@ -3,29 +3,25 @@
3
3
  Canonical global colour primitives for the DSC design system.
4
4
  These `--dx-g-*` variables are the single source of truth for raw
5
5
  colour values, e.g.
6
- --dx-g-hot-orange-95: rgba(254, 237, 241, 1);
6
+ --dx-g-hot-orange-vibrant-95: rgba(254, 237, 241, 1);
7
7
 
8
8
  Prefer referencing these `--dx-g-*` primitives — and the semantic
9
9
  tokens built on top of them — rather than introducing new raw
10
10
  colour values.
11
-
12
- Old names (`--dx-g-gray-*`, `--dx-g-*-vibrant-*`,
13
- `--dx-g-cloud-blue-vibrant-*`, `--sds-g-gray-*`) still work through
14
- aliases.css. Use the names in this file.
15
11
  */
16
12
 
17
- --dx-g-hot-orange-95: rgba(254, 237, 241, 1);
18
- --dx-g-hot-orange-90: rgba(255, 213, 222, 1);
19
- --dx-g-hot-orange-80: rgba(254, 185, 165, 1);
20
- --dx-g-hot-orange-70: rgba(255, 144, 110, 1);
21
- --dx-g-hot-orange-65: rgba(255, 120, 79, 1);
22
- --dx-g-hot-orange-60: rgba(255, 93, 45, 1);
23
- --dx-g-hot-orange-50: rgba(216, 58, 0, 1);
24
- --dx-g-hot-orange-40: rgba(170, 48, 1, 1);
25
- --dx-g-hot-orange-30: rgba(126, 38, 0, 1);
26
- --dx-g-hot-orange-20: rgba(84, 29, 1, 1);
27
- --dx-g-hot-orange-15: rgba(63, 24, 2, 1);
28
- --dx-g-hot-orange-10: rgba(40, 18, 2, 1);
13
+ --dx-g-hot-orange-vibrant-95: rgba(254, 237, 241, 1);
14
+ --dx-g-hot-orange-vibrant-90: rgba(255, 213, 222, 1);
15
+ --dx-g-hot-orange-vibrant-80: rgba(254, 185, 165, 1);
16
+ --dx-g-hot-orange-vibrant-70: rgba(255, 144, 110, 1);
17
+ --dx-g-hot-orange-vibrant-65: rgba(255, 120, 79, 1);
18
+ --dx-g-hot-orange-vibrant-60: rgba(255, 93, 45, 1);
19
+ --dx-g-hot-orange-vibrant-50: rgba(216, 58, 0, 1);
20
+ --dx-g-hot-orange-vibrant-40: rgba(170, 48, 1, 1);
21
+ --dx-g-hot-orange-vibrant-30: rgba(126, 38, 0, 1);
22
+ --dx-g-hot-orange-vibrant-20: rgba(84, 29, 1, 1);
23
+ --dx-g-hot-orange-vibrant-15: rgba(63, 24, 2, 1);
24
+ --dx-g-hot-orange-vibrant-10: rgba(40, 18, 2, 1);
29
25
  --dx-g-hot-orange-natural-95: rgba(250, 242, 240, 1);
30
26
  --dx-g-hot-orange-natural-90: rgba(245, 225, 219, 1);
31
27
  --dx-g-hot-orange-natural-80: rgba(238, 191, 177, 1);
@@ -37,18 +33,18 @@
37
33
  --dx-g-hot-orange-natural-30: rgba(112, 50, 25, 1);
38
34
  --dx-g-hot-orange-natural-20: rgba(74, 36, 19, 1);
39
35
  --dx-g-hot-orange-natural-10: rgba(35, 20, 11, 1);
40
- --dx-g-orange-95: rgba(255, 241, 234, 1);
41
- --dx-g-orange-90: rgba(254, 223, 208, 1);
42
- --dx-g-orange-80: rgba(255, 186, 144, 1);
43
- --dx-g-orange-70: rgba(254, 147, 57, 1);
44
- --dx-g-orange-65: rgba(243, 131, 3, 1);
45
- --dx-g-orange-60: rgba(221, 122, 1, 1);
46
- --dx-g-orange-50: rgba(169, 100, 4, 1);
47
- --dx-g-orange-40: rgba(130, 81, 1, 1);
48
- --dx-g-orange-30: rgba(95, 62, 2, 1);
49
- --dx-g-orange-20: rgba(62, 43, 2, 1);
50
- --dx-g-orange-15: rgba(48, 33, 2, 1);
51
- --dx-g-orange-10: rgba(32, 22, 0, 1);
36
+ --dx-g-orange-vibrant-95: rgba(255, 241, 234, 1);
37
+ --dx-g-orange-vibrant-90: rgba(254, 223, 208, 1);
38
+ --dx-g-orange-vibrant-80: rgba(255, 186, 144, 1);
39
+ --dx-g-orange-vibrant-70: rgba(254, 147, 57, 1);
40
+ --dx-g-orange-vibrant-65: rgba(243, 131, 3, 1);
41
+ --dx-g-orange-vibrant-60: rgba(221, 122, 1, 1);
42
+ --dx-g-orange-vibrant-50: rgba(169, 100, 4, 1);
43
+ --dx-g-orange-vibrant-40: rgba(130, 81, 1, 1);
44
+ --dx-g-orange-vibrant-30: rgba(95, 62, 2, 1);
45
+ --dx-g-orange-vibrant-20: rgba(62, 43, 2, 1);
46
+ --dx-g-orange-vibrant-15: rgba(48, 33, 2, 1);
47
+ --dx-g-orange-vibrant-10: rgba(32, 22, 0, 1);
52
48
  --dx-g-orange-natural-95: rgba(249, 242, 239, 1);
53
49
  --dx-g-orange-natural-90: rgba(245, 225, 216, 1);
54
50
  --dx-g-orange-natural-80: rgba(240, 191, 162, 1);
@@ -60,18 +56,18 @@
60
56
  --dx-g-orange-natural-30: rgba(89, 64, 27, 1);
61
57
  --dx-g-orange-natural-20: rgba(58, 44, 20, 1);
62
58
  --dx-g-orange-natural-10: rgba(29, 23, 10, 1);
63
- --dx-g-yellow-95: rgba(251, 243, 224, 1);
64
- --dx-g-yellow-90: rgba(249, 227, 182, 1);
65
- --dx-g-yellow-80: rgba(252, 192, 3, 1);
66
- --dx-g-yellow-70: rgba(228, 162, 1, 1);
67
- --dx-g-yellow-65: rgba(215, 147, 4, 1);
68
- --dx-g-yellow-60: rgba(202, 133, 1, 1);
69
- --dx-g-yellow-50: rgba(168, 100, 3, 1);
70
- --dx-g-yellow-40: rgba(140, 75, 2, 1);
71
- --dx-g-yellow-30: rgba(111, 52, 0, 1);
72
- --dx-g-yellow-20: rgba(79, 33, 0, 1);
73
- --dx-g-yellow-15: rgba(62, 26, 1, 1);
74
- --dx-g-yellow-10: rgba(40, 18, 2, 1);
59
+ --dx-g-yellow-vibrant-95: rgba(251, 243, 224, 1);
60
+ --dx-g-yellow-vibrant-90: rgba(249, 227, 182, 1);
61
+ --dx-g-yellow-vibrant-80: rgba(252, 192, 3, 1);
62
+ --dx-g-yellow-vibrant-70: rgba(228, 162, 1, 1);
63
+ --dx-g-yellow-vibrant-65: rgba(215, 147, 4, 1);
64
+ --dx-g-yellow-vibrant-60: rgba(202, 133, 1, 1);
65
+ --dx-g-yellow-vibrant-50: rgba(168, 100, 3, 1);
66
+ --dx-g-yellow-vibrant-40: rgba(140, 75, 2, 1);
67
+ --dx-g-yellow-vibrant-30: rgba(111, 52, 0, 1);
68
+ --dx-g-yellow-vibrant-20: rgba(79, 33, 0, 1);
69
+ --dx-g-yellow-vibrant-15: rgba(62, 26, 1, 1);
70
+ --dx-g-yellow-vibrant-10: rgba(40, 18, 2, 1);
75
71
  --dx-g-yellow-natural-95: rgba(251, 243, 226, 1);
76
72
  --dx-g-yellow-natural-90: rgba(248, 227, 183, 1);
77
73
  --dx-g-yellow-natural-80: rgba(239, 195, 107, 1);
@@ -83,18 +79,18 @@
83
79
  --dx-g-yellow-natural-30: rgba(100, 58, 27, 1);
84
80
  --dx-g-yellow-natural-20: rgba(70, 38, 19, 1);
85
81
  --dx-g-yellow-natural-10: rgba(35, 20, 11, 1);
86
- --dx-g-green-95: rgba(235, 247, 230, 1);
87
- --dx-g-green-90: rgba(205, 239, 196, 1);
88
- --dx-g-green-80: rgba(145, 219, 139, 1);
89
- --dx-g-green-70: rgba(69, 198, 90, 1);
90
- --dx-g-green-65: rgba(65, 182, 88, 1);
91
- --dx-g-green-60: rgba(59, 167, 85, 1);
92
- --dx-g-green-50: rgba(46, 132, 74, 1);
93
- --dx-g-green-40: rgba(34, 104, 62, 1);
94
- --dx-g-green-30: rgba(25, 78, 49, 1);
95
- --dx-g-green-20: rgba(14, 53, 34, 1);
96
- --dx-g-green-15: rgba(10, 41, 26, 1);
97
- --dx-g-green-10: rgba(7, 27, 18, 1);
82
+ --dx-g-green-vibrant-95: rgba(235, 247, 230, 1);
83
+ --dx-g-green-vibrant-90: rgba(205, 239, 196, 1);
84
+ --dx-g-green-vibrant-80: rgba(145, 219, 139, 1);
85
+ --dx-g-green-vibrant-70: rgba(69, 198, 90, 1);
86
+ --dx-g-green-vibrant-65: rgba(65, 182, 88, 1);
87
+ --dx-g-green-vibrant-60: rgba(59, 167, 85, 1);
88
+ --dx-g-green-vibrant-50: rgba(46, 132, 74, 1);
89
+ --dx-g-green-vibrant-40: rgba(34, 104, 62, 1);
90
+ --dx-g-green-vibrant-30: rgba(25, 78, 49, 1);
91
+ --dx-g-green-vibrant-20: rgba(14, 53, 34, 1);
92
+ --dx-g-green-vibrant-15: rgba(10, 41, 26, 1);
93
+ --dx-g-green-vibrant-10: rgba(7, 27, 18, 1);
98
94
  --dx-g-green-natural-95: rgba(235, 247, 230, 1);
99
95
  --dx-g-green-natural-90: rgba(205, 239, 196, 1);
100
96
  --dx-g-green-natural-80: rgba(145, 219, 139, 1);
@@ -106,18 +102,18 @@
106
102
  --dx-g-green-natural-30: rgba(41, 75, 54, 1);
107
103
  --dx-g-green-natural-20: rgba(28, 51, 38, 1);
108
104
  --dx-g-green-natural-10: rgba(13, 26, 19, 1);
109
- --dx-g-teal-95: rgba(222, 249, 241, 1);
110
- --dx-g-teal-90: rgba(172, 243, 228, 1);
111
- --dx-g-teal-80: rgba(4, 225, 203, 1);
112
- --dx-g-teal-70: rgba(1, 195, 179, 1);
113
- --dx-g-teal-65: rgba(3, 180, 167, 1);
114
- --dx-g-teal-60: rgba(6, 165, 154, 1);
115
- --dx-g-teal-50: rgba(11, 130, 124, 1);
116
- --dx-g-teal-40: rgba(5, 103, 100, 1);
117
- --dx-g-teal-30: rgba(2, 77, 76, 1);
118
- --dx-g-teal-20: rgba(2, 52, 52, 1);
119
- --dx-g-teal-15: rgba(4, 40, 41, 1);
120
- --dx-g-teal-10: rgba(0, 27, 28, 1);
105
+ --dx-g-teal-vibrant-95: rgba(222, 249, 241, 1);
106
+ --dx-g-teal-vibrant-90: rgba(172, 243, 228, 1);
107
+ --dx-g-teal-vibrant-80: rgba(4, 225, 203, 1);
108
+ --dx-g-teal-vibrant-70: rgba(1, 195, 179, 1);
109
+ --dx-g-teal-vibrant-65: rgba(3, 180, 167, 1);
110
+ --dx-g-teal-vibrant-60: rgba(6, 165, 154, 1);
111
+ --dx-g-teal-vibrant-50: rgba(11, 130, 124, 1);
112
+ --dx-g-teal-vibrant-40: rgba(5, 103, 100, 1);
113
+ --dx-g-teal-vibrant-30: rgba(2, 77, 76, 1);
114
+ --dx-g-teal-vibrant-20: rgba(2, 52, 52, 1);
115
+ --dx-g-teal-vibrant-15: rgba(4, 40, 41, 1);
116
+ --dx-g-teal-vibrant-10: rgba(0, 27, 28, 1);
121
117
  --dx-g-teal-natural-95: rgba(222, 249, 243, 1);
122
118
  --dx-g-teal-natural-90: rgba(172, 243, 228, 1);
123
119
  --dx-g-teal-natural-80: rgba(115, 219, 203, 1);
@@ -129,6 +125,18 @@
129
125
  --dx-g-teal-natural-30: rgba(37, 74, 73, 1);
130
126
  --dx-g-teal-natural-20: rgba(26, 50, 50, 1);
131
127
  --dx-g-teal-natural-10: rgba(12, 26, 26, 1);
128
+ --dx-g-cloud-blue-vibrant-95: rgba(238, 244, 255, 1);
129
+ --dx-g-cloud-blue-vibrant-90: rgba(216, 230, 254, 1);
130
+ --dx-g-cloud-blue-vibrant-80: rgba(170, 203, 255, 1);
131
+ --dx-g-cloud-blue-vibrant-70: rgba(120, 176, 253, 1);
132
+ --dx-g-cloud-blue-vibrant-65: rgba(87, 163, 253, 1);
133
+ --dx-g-cloud-blue-vibrant-60: rgba(27, 150, 255, 1);
134
+ --dx-g-cloud-blue-vibrant-50: rgba(1, 118, 211, 1);
135
+ --dx-g-cloud-blue-vibrant-40: rgba(11, 92, 171, 1);
136
+ --dx-g-cloud-blue-vibrant-30: rgba(1, 68, 134, 1);
137
+ --dx-g-cloud-blue-vibrant-20: rgba(3, 45, 96, 1);
138
+ --dx-g-cloud-blue-vibrant-15: rgba(2, 34, 78, 1);
139
+ --dx-g-cloud-blue-vibrant-10: rgba(0, 22, 57, 1);
132
140
  --dx-g-cloud-blue-natural-95: rgba(239, 244, 249, 1);
133
141
  --dx-g-cloud-blue-natural-90: rgba(215, 231, 245, 1);
134
142
  --dx-g-cloud-blue-natural-80: rgba(167, 206, 236, 1);
@@ -140,18 +148,18 @@
140
148
  --dx-g-cloud-blue-natural-30: rgba(42, 72, 92, 1);
141
149
  --dx-g-cloud-blue-natural-20: rgba(25, 49, 64, 1);
142
150
  --dx-g-cloud-blue-natural-10: rgba(12, 25, 33, 1);
143
- --dx-g-blue-95: rgba(238, 244, 255, 1);
144
- --dx-g-blue-90: rgba(216, 230, 254, 1);
145
- --dx-g-blue-80: rgba(170, 203, 255, 1);
146
- --dx-g-blue-70: rgba(120, 176, 253, 1);
147
- --dx-g-blue-65: rgba(87, 163, 253, 1);
148
- --dx-g-blue-60: rgba(27, 150, 255, 1);
149
- --dx-g-blue-50: rgba(1, 118, 211, 1);
150
- --dx-g-blue-40: rgba(11, 92, 171, 1);
151
- --dx-g-blue-30: rgba(1, 68, 134, 1);
152
- --dx-g-blue-20: rgba(3, 45, 96, 1);
153
- --dx-g-blue-15: rgba(3, 35, 77, 1);
154
- --dx-g-blue-10: rgba(0, 22, 57, 1);
151
+ --dx-g-blue-vibrant-95: rgba(238, 244, 255, 1);
152
+ --dx-g-blue-vibrant-90: rgba(216, 230, 254, 1);
153
+ --dx-g-blue-vibrant-80: rgba(170, 203, 255, 1);
154
+ --dx-g-blue-vibrant-70: rgba(120, 176, 253, 1);
155
+ --dx-g-blue-vibrant-65: rgba(87, 163, 253, 1);
156
+ --dx-g-blue-vibrant-60: rgba(27, 150, 255, 1);
157
+ --dx-g-blue-vibrant-50: rgba(1, 118, 211, 1);
158
+ --dx-g-blue-vibrant-40: rgba(11, 92, 171, 1);
159
+ --dx-g-blue-vibrant-30: rgba(1, 68, 134, 1);
160
+ --dx-g-blue-vibrant-20: rgba(3, 45, 96, 1);
161
+ --dx-g-blue-vibrant-15: rgba(3, 35, 77, 1);
162
+ --dx-g-blue-vibrant-10: rgba(0, 22, 57, 1);
155
163
  --dx-g-blue-natural-95: rgba(241, 244, 249, 1);
156
164
  --dx-g-blue-natural-90: rgba(221, 230, 244, 1);
157
165
  --dx-g-blue-natural-80: rgba(181, 202, 238, 1);
@@ -163,18 +171,18 @@
163
171
  --dx-g-blue-natural-30: rgba(46, 68, 112, 1);
164
172
  --dx-g-blue-natural-20: rgba(30, 45, 80, 1);
165
173
  --dx-g-blue-natural-10: rgba(15, 23, 45, 1);
166
- --dx-g-indigo-95: rgba(241, 243, 251, 1);
167
- --dx-g-indigo-90: rgba(224, 229, 248, 1);
168
- --dx-g-indigo-80: rgba(190, 199, 246, 1);
169
- --dx-g-indigo-70: rgba(158, 169, 241, 1);
170
- --dx-g-indigo-65: rgba(142, 155, 239, 1);
171
- --dx-g-indigo-60: rgba(127, 140, 237, 1);
172
- --dx-g-indigo-50: rgba(88, 103, 232, 1);
173
- --dx-g-indigo-40: rgba(58, 73, 218, 1);
174
- --dx-g-indigo-30: rgba(47, 44, 183, 1);
175
- --dx-g-indigo-20: rgba(38, 15, 143, 1);
176
- --dx-g-indigo-15: rgba(39, 10, 107, 1);
177
- --dx-g-indigo-10: rgba(32, 6, 71, 1);
174
+ --dx-g-indigo-vibrant-95: rgba(241, 243, 251, 1);
175
+ --dx-g-indigo-vibrant-90: rgba(224, 229, 248, 1);
176
+ --dx-g-indigo-vibrant-80: rgba(190, 199, 246, 1);
177
+ --dx-g-indigo-vibrant-70: rgba(158, 169, 241, 1);
178
+ --dx-g-indigo-vibrant-65: rgba(142, 155, 239, 1);
179
+ --dx-g-indigo-vibrant-60: rgba(127, 140, 237, 1);
180
+ --dx-g-indigo-vibrant-50: rgba(88, 103, 232, 1);
181
+ --dx-g-indigo-vibrant-40: rgba(58, 73, 218, 1);
182
+ --dx-g-indigo-vibrant-30: rgba(47, 44, 183, 1);
183
+ --dx-g-indigo-vibrant-20: rgba(38, 15, 143, 1);
184
+ --dx-g-indigo-vibrant-15: rgba(39, 10, 107, 1);
185
+ --dx-g-indigo-vibrant-10: rgba(32, 6, 71, 1);
178
186
  --dx-g-indigo-natural-95: rgba(242, 243, 249, 1);
179
187
  --dx-g-indigo-natural-90: rgba(226, 229, 242, 1);
180
188
  --dx-g-indigo-natural-80: rgba(194, 200, 232, 1);
@@ -186,18 +194,18 @@
186
194
  --dx-g-indigo-natural-30: rgba(67, 53, 147, 1);
187
195
  --dx-g-indigo-natural-20: rgba(50, 29, 113, 1);
188
196
  --dx-g-indigo-natural-10: rgba(32, 13, 56, 1);
189
- --dx-g-purple-95: rgba(246, 242, 251, 1);
190
- --dx-g-purple-90: rgba(236, 225, 249, 1);
191
- --dx-g-purple-80: rgba(215, 191, 245, 1);
192
- --dx-g-purple-70: rgba(194, 158, 241, 1);
193
- --dx-g-purple-65: rgba(183, 141, 239, 1);
194
- --dx-g-purple-60: rgba(173, 123, 238, 1);
195
- --dx-g-purple-50: rgba(144, 80, 233, 1);
196
- --dx-g-purple-40: rgba(117, 38, 227, 1);
197
- --dx-g-purple-30: rgba(90, 27, 169, 1);
198
- --dx-g-purple-20: rgba(64, 16, 117, 1);
199
- --dx-g-purple-15: rgba(51, 11, 93, 1);
200
- --dx-g-purple-10: rgba(36, 6, 67, 1);
197
+ --dx-g-purple-vibrant-95: rgba(246, 242, 251, 1);
198
+ --dx-g-purple-vibrant-90: rgba(236, 225, 249, 1);
199
+ --dx-g-purple-vibrant-80: rgba(215, 191, 245, 1);
200
+ --dx-g-purple-vibrant-70: rgba(194, 158, 241, 1);
201
+ --dx-g-purple-vibrant-65: rgba(183, 141, 239, 1);
202
+ --dx-g-purple-vibrant-60: rgba(173, 123, 238, 1);
203
+ --dx-g-purple-vibrant-50: rgba(144, 80, 233, 1);
204
+ --dx-g-purple-vibrant-40: rgba(117, 38, 227, 1);
205
+ --dx-g-purple-vibrant-30: rgba(90, 27, 169, 1);
206
+ --dx-g-purple-vibrant-20: rgba(64, 16, 117, 1);
207
+ --dx-g-purple-vibrant-15: rgba(51, 11, 93, 1);
208
+ --dx-g-purple-vibrant-10: rgba(36, 6, 67, 1);
201
209
  --dx-g-purple-natural-95: rgba(245, 243, 248, 1);
202
210
  --dx-g-purple-natural-90: rgba(234, 226, 243, 1);
203
211
  --dx-g-purple-natural-80: rgba(211, 194, 232, 1);
@@ -209,18 +217,18 @@
209
217
  --dx-g-purple-natural-30: rgba(88, 45, 138, 1);
210
218
  --dx-g-purple-natural-20: rgba(62, 29, 96, 1);
211
219
  --dx-g-purple-natural-10: rgba(34, 13, 53, 1);
212
- --dx-g-violet-95: rgba(249, 240, 255, 1);
213
- --dx-g-violet-90: rgba(242, 222, 254, 1);
214
- --dx-g-violet-80: rgba(229, 185, 244, 1);
215
- --dx-g-violet-70: rgba(216, 146, 254, 1);
216
- --dx-g-violet-65: rgba(209, 125, 254, 1);
217
- --dx-g-violet-60: rgba(203, 101, 255, 1);
218
- --dx-g-violet-50: rgba(186, 1, 255, 1);
219
- --dx-g-violet-40: rgba(150, 2, 199, 1);
220
- --dx-g-violet-30: rgba(115, 3, 148, 1);
221
- --dx-g-violet-20: rgba(82, 0, 102, 1);
222
- --dx-g-violet-15: rgba(65, 1, 80, 1);
223
- --dx-g-violet-10: rgba(46, 0, 57, 1);
220
+ --dx-g-violet-vibrant-95: rgba(249, 240, 255, 1);
221
+ --dx-g-violet-vibrant-90: rgba(242, 222, 254, 1);
222
+ --dx-g-violet-vibrant-80: rgba(229, 185, 244, 1);
223
+ --dx-g-violet-vibrant-70: rgba(216, 146, 254, 1);
224
+ --dx-g-violet-vibrant-65: rgba(209, 125, 254, 1);
225
+ --dx-g-violet-vibrant-60: rgba(203, 101, 255, 1);
226
+ --dx-g-violet-vibrant-50: rgba(186, 1, 255, 1);
227
+ --dx-g-violet-vibrant-40: rgba(150, 2, 199, 1);
228
+ --dx-g-violet-vibrant-30: rgba(115, 3, 148, 1);
229
+ --dx-g-violet-vibrant-20: rgba(82, 0, 102, 1);
230
+ --dx-g-violet-vibrant-15: rgba(65, 1, 80, 1);
231
+ --dx-g-violet-vibrant-10: rgba(46, 0, 57, 1);
224
232
  --dx-g-violet-natural-95: rgba(247, 242, 251, 1);
225
233
  --dx-g-violet-natural-90: rgba(238, 225, 246, 1);
226
234
  --dx-g-violet-natural-80: rgba(221, 190, 237, 1);
@@ -232,18 +240,18 @@
232
240
  --dx-g-violet-natural-30: rgba(103, 40, 123, 1);
233
241
  --dx-g-violet-natural-20: rgba(72, 26, 84, 1);
234
242
  --dx-g-violet-natural-10: rgba(40, 11, 46, 1);
235
- --dx-g-pink-95: rgba(254, 240, 243, 1);
236
- --dx-g-pink-90: rgba(253, 221, 227, 1);
237
- --dx-g-pink-80: rgba(253, 182, 197, 1);
238
- --dx-g-pink-70: rgba(254, 138, 167, 1);
239
- --dx-g-pink-65: rgba(254, 114, 152, 1);
240
- --dx-g-pink-60: rgba(255, 83, 138, 1);
241
- --dx-g-pink-50: rgba(227, 6, 106, 1);
242
- --dx-g-pink-40: rgba(182, 5, 84, 1);
243
- --dx-g-pink-30: rgba(138, 3, 62, 1);
244
- --dx-g-pink-20: rgba(97, 2, 42, 1);
245
- --dx-g-pink-15: rgba(77, 2, 32, 1);
246
- --dx-g-pink-10: rgba(55, 1, 20, 1);
243
+ --dx-g-pink-vibrant-95: rgba(254, 240, 243, 1);
244
+ --dx-g-pink-vibrant-90: rgba(253, 221, 227, 1);
245
+ --dx-g-pink-vibrant-80: rgba(253, 182, 197, 1);
246
+ --dx-g-pink-vibrant-70: rgba(254, 138, 167, 1);
247
+ --dx-g-pink-vibrant-65: rgba(254, 114, 152, 1);
248
+ --dx-g-pink-vibrant-60: rgba(255, 83, 138, 1);
249
+ --dx-g-pink-vibrant-50: rgba(227, 6, 106, 1);
250
+ --dx-g-pink-vibrant-40: rgba(182, 5, 84, 1);
251
+ --dx-g-pink-vibrant-30: rgba(138, 3, 62, 1);
252
+ --dx-g-pink-vibrant-20: rgba(97, 2, 42, 1);
253
+ --dx-g-pink-vibrant-15: rgba(77, 2, 32, 1);
254
+ --dx-g-pink-vibrant-10: rgba(55, 1, 20, 1);
247
255
  --dx-g-pink-natural-95: rgba(250, 242, 243, 1);
248
256
  --dx-g-pink-natural-90: rgba(246, 224, 228, 1);
249
257
  --dx-g-pink-natural-80: rgba(238, 189, 198, 1);
@@ -255,18 +263,18 @@
255
263
  --dx-g-pink-natural-30: rgba(118, 41, 64, 1);
256
264
  --dx-g-pink-natural-20: rgba(83, 26, 43, 1);
257
265
  --dx-g-pink-natural-10: rgba(46, 11, 21, 1);
258
- --dx-g-red-95: rgba(254, 241, 238, 1);
259
- --dx-g-red-90: rgba(254, 222, 216, 1);
260
- --dx-g-red-80: rgba(254, 184, 171, 1);
261
- --dx-g-red-70: rgba(254, 143, 125, 1);
262
- --dx-g-red-65: rgba(254, 119, 101, 1);
263
- --dx-g-red-60: rgba(254, 92, 76, 1);
264
- --dx-g-red-50: rgba(234, 0, 30, 1);
265
- --dx-g-red-40: rgba(186, 5, 23, 1);
266
- --dx-g-red-30: rgba(142, 3, 15, 1);
267
- --dx-g-red-20: rgba(100, 1, 3, 1);
268
- --dx-g-red-15: rgba(80, 2, 2, 1);
269
- --dx-g-red-10: rgba(48, 12, 1, 1);
266
+ --dx-g-red-vibrant-95: rgba(254, 241, 238, 1);
267
+ --dx-g-red-vibrant-90: rgba(254, 222, 216, 1);
268
+ --dx-g-red-vibrant-80: rgba(254, 184, 171, 1);
269
+ --dx-g-red-vibrant-70: rgba(254, 143, 125, 1);
270
+ --dx-g-red-vibrant-65: rgba(254, 119, 101, 1);
271
+ --dx-g-red-vibrant-60: rgba(254, 92, 76, 1);
272
+ --dx-g-red-vibrant-50: rgba(234, 0, 30, 1);
273
+ --dx-g-red-vibrant-40: rgba(186, 5, 23, 1);
274
+ --dx-g-red-vibrant-30: rgba(142, 3, 15, 1);
275
+ --dx-g-red-vibrant-20: rgba(100, 1, 3, 1);
276
+ --dx-g-red-vibrant-15: rgba(80, 2, 2, 1);
277
+ --dx-g-red-vibrant-10: rgba(48, 12, 1, 1);
270
278
  --dx-g-red-natural-95: rgba(250, 242, 240, 1);
271
279
  --dx-g-red-natural-90: rgba(246, 225, 221, 1);
272
280
  --dx-g-red-natural-80: rgba(239, 190, 181, 1);
@@ -278,18 +286,31 @@
278
286
  --dx-g-red-natural-30: rgba(123, 40, 32, 1);
279
287
  --dx-g-red-natural-20: rgba(86, 25, 19, 1);
280
288
  --dx-g-red-natural-10: rgba(41, 17, 10, 1);
281
- --dx-g-neutral-100: rgba(255, 255, 255, 1);
282
- --dx-g-neutral-95: rgba(243, 243, 243, 1);
283
- --dx-g-neutral-90: rgba(229, 229, 229, 1);
284
- --dx-g-neutral-80: rgba(201, 201, 201, 1);
285
- --dx-g-neutral-70: rgba(174, 174, 174, 1);
286
- --dx-g-neutral-65: rgba(160, 160, 160, 1);
287
- --dx-g-neutral-60: rgba(147, 147, 147, 1);
288
- --dx-g-neutral-50: rgba(116, 116, 116, 1);
289
- --dx-g-neutral-40: rgba(92, 92, 92, 1);
290
- --dx-g-neutral-30: rgba(68, 68, 68, 1);
291
- --dx-g-neutral-20: rgba(46, 46, 46, 1);
292
- --dx-g-neutral-15: rgba(36, 36, 36, 1);
293
- --dx-g-neutral-10: rgba(24, 24, 24, 1);
294
- --dx-g-neutral-0: rgba(0, 0, 0, 1);
289
+ --dx-g-gray-95: rgba(243, 243, 243, 1);
290
+ --dx-g-gray-90: rgba(229, 229, 229, 1);
291
+ --dx-g-gray-80: rgba(201, 201, 201, 1);
292
+ --dx-g-gray-70: rgba(174, 174, 174, 1);
293
+ --dx-g-gray-65: rgba(160, 160, 160, 1);
294
+ --dx-g-gray-60: rgba(147, 147, 147, 1);
295
+ --dx-g-gray-50: rgba(116, 116, 116, 1);
296
+ --dx-g-gray-40: rgba(92, 92, 92, 1);
297
+ --dx-g-gray-30: rgba(68, 68, 68, 1);
298
+ --dx-g-gray-20: rgba(46, 46, 46, 1);
299
+ --dx-g-gray-15: rgba(36, 36, 36, 1);
300
+ --dx-g-gray-10: rgba(24, 24, 24, 1);
301
+
302
+ --sds-g-gray-1: rgba(255, 255, 255, 1);
303
+ --sds-g-gray-2: rgba(250, 250, 249, 1);
304
+ --sds-g-gray-3: rgba(243, 242, 242, 1);
305
+ --sds-g-gray-4: rgba(236, 235, 234, 1);
306
+ --sds-g-gray-5: rgba(221, 219, 218, 1);
307
+ --sds-g-gray-6: rgba(201, 199, 197, 1);
308
+ --sds-g-gray-7: rgba(176, 173, 171, 1);
309
+ --sds-g-gray-8: rgba(150, 148, 146, 1);
310
+ --sds-g-gray-9: rgba(112, 110, 107, 1);
311
+ --sds-g-gray-10: rgba(81, 79, 77, 1);
312
+ --sds-g-gray-11: rgba(62, 62, 60, 1);
313
+ --sds-g-gray-12: rgba(43, 40, 38, 1);
314
+ --sds-g-gray-13: rgba(8, 7, 7, 1);
315
+ --sds-g-gray-14: rgba(92, 92, 92, 1);
295
316
  }
package/assets/css/colors/semantic.css CHANGED
@@ -3,45 +3,45 @@
3
3
  /* ----------- */
4
4
  /* TEXT COLORS */
5
5
  /* ----------- */
6
- --dx-g-text-button-color: var(--dx-g-blue-50);
6
+ --dx-g-text-button-color: var(--dx-g-blue-vibrant-50);
7
7
  --dx-g-text-button-light-color: white;
8
8
 
9
9
  /* Defaults for no Dark/Light theme pages */
10
10
  --dx-g-body-background-color: white;
11
- --dx-g-hr-font-color: var(--dx-g-blue-20);
11
+ --dx-g-hr-font-color: var(--dx-g-blue-vibrant-20);
12
12
 
13
- --dx-g-text-label-color: var(--dx-g-neutral-30);
14
- --dx-g-text-heading-color: var(--dx-g-blue-20);
15
- --dx-g-text-body-color: var(--dx-g-neutral-10);
16
- --dx-g-link-hover-color: var(--dx-g-blue-40);
17
- --dx-g-code-text-color: var(--dx-g-neutral-10);
18
- --dx-g-code-background-color: var(--dx-g-neutral-95);
13
+ --dx-g-text-label-color: var(--dx-g-gray-30);
14
+ --dx-g-text-heading-color: var(--dx-g-blue-vibrant-20);
15
+ --dx-g-text-body-color: var(--dx-g-gray-10);
16
+ --dx-g-link-hover-color: var(--dx-g-blue-vibrant-40);
17
+ --dx-g-code-text-color: var(--dx-g-gray-10);
18
+ --dx-g-code-background-color: var(--dx-g-gray-95);
19
19
  --dx-g-social-svg-icon-color: white;
20
- --dx-g-social-svg-background-color: var(--dx-g-blue-50);
21
- --dx-g-social-svg-hover-color: var(--dx-g-blue-40);
22
- --dx-card-title-hover-color: var(--dx-g-blue-50);
20
+ --dx-g-social-svg-background-color: var(--dx-g-blue-vibrant-50);
21
+ --dx-g-social-svg-hover-color: var(--dx-g-blue-vibrant-40);
22
+ --dx-card-title-hover-color: var(--dx-g-blue-vibrant-50);
23
23
 
24
- --dx-g-audio-background-color: var(--dx-g-indigo-90);
25
- --dx-g-audio-inner-div-background-color: var(--dx-g-neutral-100);
24
+ --dx-g-audio-background-color: var(--dx-g-indigo-vibrant-90);
25
+ --dx-g-audio-inner-div-background-color: var(--sds-g-gray-1);
26
26
  --dx-g-audio-text-color: initial;
27
27
  --dx-g-audio-threedot-menu-text-color: initial;
28
- --dx-g-audio-button-hover-color: var(--dx-g-neutral-90);
28
+ --dx-g-audio-button-hover-color: var(--sds-g-gray-4);
29
29
 
30
- --dx-podcast-audio-background-color: var(--dx-g-indigo-90);
31
- --dx-podcast-audio-inner-div-background-color: var(--dx-g-neutral-100);
32
- --dx-podcast-subscription-link-color: var(--dx-g-blue-50);
30
+ --dx-podcast-audio-background-color: var(--dx-g-indigo-vibrant-90);
31
+ --dx-podcast-audio-inner-div-background-color: var(--sds-g-gray-1);
32
+ --dx-podcast-subscription-link-color: var(--dx-g-blue-vibrant-50);
33
33
  --dx-podcast-host-background-color: white;
34
34
 
35
35
  --dx-g-blog-post-heading-color: currentcolor;
36
- --dx-g-blog-post-th-color: var(--dx-g-indigo-95);
37
- --dx-g-prose-link-color: var(--dx-g-blue-50);
36
+ --dx-g-blog-post-th-color: var(--dx-g-indigo-vibrant-95);
37
+ --dx-g-prose-link-color: var(--dx-g-blue-vibrant-50);
38
38
 
39
- --dx-g-button-primary-color: var(--dx-g-blue-50);
40
- --dx-g-button-secondary-color: var(--dx-g-blue-50);
41
- --dx-g-button-secondary-color-hover: var(--dx-g-blue-90);
39
+ --dx-g-button-primary-color: var(--dx-g-blue-vibrant-50);
40
+ --dx-g-button-secondary-color: var(--dx-g-blue-vibrant-50);
41
+ --dx-g-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
42
42
  --dx-g-button-icon-color: currentcolor;
43
- --dx-g-button-inline-color: var(--dx-g-blue-50);
44
- --dx-g-button-inline-color-hover: var(--dx-g-blue-30);
43
+ --dx-g-button-inline-color: var(--dx-g-blue-vibrant-50);
44
+ --dx-g-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
45
45
 
46
46
  --dx-g-svg-filter: none;
47
47
 
@@ -53,41 +53,38 @@
53
53
  --dx-g-dark-mode-toggle-code-block-border: none;
54
54
 
55
55
  --dx-g-language-picker-background-color: white;
56
- /* stylelint-disable-next-line color-no-hex -- leftover raw color; fix in a later item, not Q-tier-lint */
57
56
  --dx-g-language-picker-font-color: #747474;
58
- --dx-g-language-picker-option-hover-color: var(--dx-g-neutral-90);
59
- /* stylelint-disable-next-line color-no-hex -- leftover raw color; fix in a later item, not Q-tier-lint */
57
+ --dx-g-language-picker-option-hover-color: var(--sds-g-gray-4);
60
58
  --dx-g-language-picker-option-color: #181818;
61
- --dx-g-language-picker-checkmark-color: var(--dx-g-indigo-50);
59
+ --dx-g-language-picker-checkmark-color: var(--dx-g-indigo-vibrant-50);
62
60
 
63
61
  --dx-blog-grid-themed-left-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-left.svg");
64
62
  --dx-blog-grid-themed-right-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-right.svg");
65
63
 
66
- --dx-footer-themed-background-color: var(--dx-g-indigo-95);
67
- --dx-footer-themed-top-background-color: var(--dx-g-indigo-95);
64
+ --dx-footer-themed-background-color: var(--dx-g-indigo-vibrant-95);
65
+ --dx-footer-themed-top-background-color: var(--dx-g-indigo-vibrant-95);
68
66
  --dx-footer-themed-top-large-background-color: white;
69
- --dx-footer-themed-top-border-color: var(--dx-g-indigo-30);
70
- --dx-footer-themed-header-color: var(--dx-g-blue-20);
71
- --dx-footer-themed-header-link-color: var(--dx-g-blue-40);
72
- --dx-footer-themed-header-link-hover-color: var(--dx-g-blue-20);
73
- --dx-footer-themed-svg-icon-color: var(--dx-g-blue-20);
67
+ --dx-footer-themed-top-border-color: var(--dx-g-indigo-vibrant-30);
68
+ --dx-footer-themed-header-color: var(--dx-g-blue-vibrant-20);
69
+ --dx-footer-themed-header-link-color: var(--dx-g-blue-vibrant-40);
70
+ --dx-footer-themed-header-link-hover-color: var(--dx-g-blue-vibrant-20);
71
+ --dx-footer-themed-svg-icon-color: var(--dx-g-blue-vibrant-20);
74
72
  --dx-footer-themed-svg-background-color: white;
75
- --dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-20);
73
+ --dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-vibrant-20);
76
74
  --dx-footer-themed-large-graphic: url('https://a.sfdcstatic.com/developer-website/images/footer-graphic-large-2.svg');
77
75
 
78
76
  --dx-g-background-color: white;
79
- --dx-g-title-hover-color: var(--dx-g-blue-40);
77
+ --dx-g-title-hover-color: var(--dx-g-blue-vibrant-40);
80
78
 
81
79
  --dx-themed-featured-content-header-background-swoop: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_light.png");
82
80
  --dx-themed-featured-content-header-background-swoop-intense: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_intense.png");
83
- --dx-themed-featured-content-header-text-color: var(--dx-g-indigo-40);
84
- --dx-themed-featured-content-header-title-link-light-color: var(--dx-g-blue-20);
81
+ --dx-themed-featured-content-header-text-color: var(--dx-g-indigo-vibrant-40);
82
+ --dx-themed-featured-content-header-title-link-light-color: var(--dx-g-blue-vibrant-20);
85
83
  --dx-themed-featured-content-header-title-link-intense-color: white;
86
- --dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-blue-10);
87
- --dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-90);
88
- /* stylelint-disable-next-line function-disallowed-list -- leftover raw color; fix in a later item, not Q-tier-lint */
84
+ --dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-blue-vibrant-10);
85
+ --dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-vibrant-90);
89
86
  --dx-themed-featured-content-header-intense-label-color: rgb(190 199 246);
90
87
  --dx-themed-featured-content-header-button-color: white;
91
- --dx-themed-featured-content-header-button-background-color: var(--dx-g-blue-50);
92
- --dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-40);
88
+ --dx-themed-featured-content-header-button-background-color: var(--dx-g-blue-vibrant-50);
89
+ --dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-vibrant-40);
93
90
  }
package/assets/css/colors.css CHANGED
@@ -4,4 +4,3 @@
4
4
  @import './colors/brand.css';
5
5
  @import './colors/content-type.css';
6
6
  @import './colors/dark.css';
7
- @import './colors/aliases.css';
package/assets/css/index.css CHANGED
@@ -7,7 +7,6 @@
7
7
  @import './colors/brand.css';
8
8
  @import './colors/content-type.css';
9
9
  @import './colors/dark.css';
10
- @import './colors/aliases.css';
11
10
 
12
11
  @import './iconSizes.css';
13
12
  @import './page.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-css-variables",
3
- "version": "0.4.1-remediation.1",
3
+ "version": "0.4.1",
4
4
  "license": "BSD-3-Clause",
5
5
  "files": [
6
6
  "assets"
package/assets/css/colors/aliases.css DELETED
@@ -1,188 +0,0 @@
1
- /*
2
- Deprecated color names (remediation 1.4).
3
- Each old name points at its new name, so code that uses it sees the same
4
- color. Do not use these in new code. They stay until the token deprecation
5
- policy (remediation 3.3) says when they go.
6
-
7
- Set on body.dark as well as :root so each alias follows the new name there.
8
- */
9
- :root,
10
- body.dark {
11
- /* Deprecated: use --dx-g-neutral-{step}. */
12
- --dx-g-gray-95: var(--dx-g-neutral-95);
13
- --dx-g-gray-90: var(--dx-g-neutral-90);
14
- --dx-g-gray-80: var(--dx-g-neutral-80);
15
- --dx-g-gray-70: var(--dx-g-neutral-70);
16
- --dx-g-gray-65: var(--dx-g-neutral-65);
17
- --dx-g-gray-60: var(--dx-g-neutral-60);
18
- --dx-g-gray-50: var(--dx-g-neutral-50);
19
- --dx-g-gray-40: var(--dx-g-neutral-40);
20
- --dx-g-gray-30: var(--dx-g-neutral-30);
21
- --dx-g-gray-20: var(--dx-g-neutral-20);
22
- --dx-g-gray-15: var(--dx-g-neutral-15);
23
- --dx-g-gray-10: var(--dx-g-neutral-10);
24
-
25
- /* Deprecated: use --dx-g-{family}-{step} (the same name without -vibrant). */
26
- --dx-g-hot-orange-vibrant-95: var(--dx-g-hot-orange-95);
27
- --dx-g-hot-orange-vibrant-90: var(--dx-g-hot-orange-90);
28
- --dx-g-hot-orange-vibrant-80: var(--dx-g-hot-orange-80);
29
- --dx-g-hot-orange-vibrant-70: var(--dx-g-hot-orange-70);
30
- --dx-g-hot-orange-vibrant-65: var(--dx-g-hot-orange-65);
31
- --dx-g-hot-orange-vibrant-60: var(--dx-g-hot-orange-60);
32
- --dx-g-hot-orange-vibrant-50: var(--dx-g-hot-orange-50);
33
- --dx-g-hot-orange-vibrant-40: var(--dx-g-hot-orange-40);
34
- --dx-g-hot-orange-vibrant-30: var(--dx-g-hot-orange-30);
35
- --dx-g-hot-orange-vibrant-20: var(--dx-g-hot-orange-20);
36
- --dx-g-hot-orange-vibrant-15: var(--dx-g-hot-orange-15);
37
- --dx-g-hot-orange-vibrant-10: var(--dx-g-hot-orange-10);
38
- --dx-g-orange-vibrant-95: var(--dx-g-orange-95);
39
- --dx-g-orange-vibrant-90: var(--dx-g-orange-90);
40
- --dx-g-orange-vibrant-80: var(--dx-g-orange-80);
41
- --dx-g-orange-vibrant-70: var(--dx-g-orange-70);
42
- --dx-g-orange-vibrant-65: var(--dx-g-orange-65);
43
- --dx-g-orange-vibrant-60: var(--dx-g-orange-60);
44
- --dx-g-orange-vibrant-50: var(--dx-g-orange-50);
45
- --dx-g-orange-vibrant-40: var(--dx-g-orange-40);
46
- --dx-g-orange-vibrant-30: var(--dx-g-orange-30);
47
- --dx-g-orange-vibrant-20: var(--dx-g-orange-20);
48
- --dx-g-orange-vibrant-15: var(--dx-g-orange-15);
49
- --dx-g-orange-vibrant-10: var(--dx-g-orange-10);
50
- --dx-g-yellow-vibrant-95: var(--dx-g-yellow-95);
51
- --dx-g-yellow-vibrant-90: var(--dx-g-yellow-90);
52
- --dx-g-yellow-vibrant-80: var(--dx-g-yellow-80);
53
- --dx-g-yellow-vibrant-70: var(--dx-g-yellow-70);
54
- --dx-g-yellow-vibrant-65: var(--dx-g-yellow-65);
55
- --dx-g-yellow-vibrant-60: var(--dx-g-yellow-60);
56
- --dx-g-yellow-vibrant-50: var(--dx-g-yellow-50);
57
- --dx-g-yellow-vibrant-40: var(--dx-g-yellow-40);
58
- --dx-g-yellow-vibrant-30: var(--dx-g-yellow-30);
59
- --dx-g-yellow-vibrant-20: var(--dx-g-yellow-20);
60
- --dx-g-yellow-vibrant-15: var(--dx-g-yellow-15);
61
- --dx-g-yellow-vibrant-10: var(--dx-g-yellow-10);
62
- --dx-g-green-vibrant-95: var(--dx-g-green-95);
63
- --dx-g-green-vibrant-90: var(--dx-g-green-90);
64
- --dx-g-green-vibrant-80: var(--dx-g-green-80);
65
- --dx-g-green-vibrant-70: var(--dx-g-green-70);
66
- --dx-g-green-vibrant-65: var(--dx-g-green-65);
67
- --dx-g-green-vibrant-60: var(--dx-g-green-60);
68
- --dx-g-green-vibrant-50: var(--dx-g-green-50);
69
- --dx-g-green-vibrant-40: var(--dx-g-green-40);
70
- --dx-g-green-vibrant-30: var(--dx-g-green-30);
71
- --dx-g-green-vibrant-20: var(--dx-g-green-20);
72
- --dx-g-green-vibrant-15: var(--dx-g-green-15);
73
- --dx-g-green-vibrant-10: var(--dx-g-green-10);
74
- --dx-g-teal-vibrant-95: var(--dx-g-teal-95);
75
- --dx-g-teal-vibrant-90: var(--dx-g-teal-90);
76
- --dx-g-teal-vibrant-80: var(--dx-g-teal-80);
77
- --dx-g-teal-vibrant-70: var(--dx-g-teal-70);
78
- --dx-g-teal-vibrant-65: var(--dx-g-teal-65);
79
- --dx-g-teal-vibrant-60: var(--dx-g-teal-60);
80
- --dx-g-teal-vibrant-50: var(--dx-g-teal-50);
81
- --dx-g-teal-vibrant-40: var(--dx-g-teal-40);
82
- --dx-g-teal-vibrant-30: var(--dx-g-teal-30);
83
- --dx-g-teal-vibrant-20: var(--dx-g-teal-20);
84
- --dx-g-teal-vibrant-15: var(--dx-g-teal-15);
85
- --dx-g-teal-vibrant-10: var(--dx-g-teal-10);
86
- --dx-g-blue-vibrant-95: var(--dx-g-blue-95);
87
- --dx-g-blue-vibrant-90: var(--dx-g-blue-90);
88
- --dx-g-blue-vibrant-80: var(--dx-g-blue-80);
89
- --dx-g-blue-vibrant-70: var(--dx-g-blue-70);
90
- --dx-g-blue-vibrant-65: var(--dx-g-blue-65);
91
- --dx-g-blue-vibrant-60: var(--dx-g-blue-60);
92
- --dx-g-blue-vibrant-50: var(--dx-g-blue-50);
93
- --dx-g-blue-vibrant-40: var(--dx-g-blue-40);
94
- --dx-g-blue-vibrant-30: var(--dx-g-blue-30);
95
- --dx-g-blue-vibrant-20: var(--dx-g-blue-20);
96
- --dx-g-blue-vibrant-15: var(--dx-g-blue-15);
97
- --dx-g-blue-vibrant-10: var(--dx-g-blue-10);
98
- --dx-g-indigo-vibrant-95: var(--dx-g-indigo-95);
99
- --dx-g-indigo-vibrant-90: var(--dx-g-indigo-90);
100
- --dx-g-indigo-vibrant-80: var(--dx-g-indigo-80);
101
- --dx-g-indigo-vibrant-70: var(--dx-g-indigo-70);
102
- --dx-g-indigo-vibrant-65: var(--dx-g-indigo-65);
103
- --dx-g-indigo-vibrant-60: var(--dx-g-indigo-60);
104
- --dx-g-indigo-vibrant-50: var(--dx-g-indigo-50);
105
- --dx-g-indigo-vibrant-40: var(--dx-g-indigo-40);
106
- --dx-g-indigo-vibrant-30: var(--dx-g-indigo-30);
107
- --dx-g-indigo-vibrant-20: var(--dx-g-indigo-20);
108
- --dx-g-indigo-vibrant-15: var(--dx-g-indigo-15);
109
- --dx-g-indigo-vibrant-10: var(--dx-g-indigo-10);
110
- --dx-g-purple-vibrant-95: var(--dx-g-purple-95);
111
- --dx-g-purple-vibrant-90: var(--dx-g-purple-90);
112
- --dx-g-purple-vibrant-80: var(--dx-g-purple-80);
113
- --dx-g-purple-vibrant-70: var(--dx-g-purple-70);
114
- --dx-g-purple-vibrant-65: var(--dx-g-purple-65);
115
- --dx-g-purple-vibrant-60: var(--dx-g-purple-60);
116
- --dx-g-purple-vibrant-50: var(--dx-g-purple-50);
117
- --dx-g-purple-vibrant-40: var(--dx-g-purple-40);
118
- --dx-g-purple-vibrant-30: var(--dx-g-purple-30);
119
- --dx-g-purple-vibrant-20: var(--dx-g-purple-20);
120
- --dx-g-purple-vibrant-15: var(--dx-g-purple-15);
121
- --dx-g-purple-vibrant-10: var(--dx-g-purple-10);
122
- --dx-g-violet-vibrant-95: var(--dx-g-violet-95);
123
- --dx-g-violet-vibrant-90: var(--dx-g-violet-90);
124
- --dx-g-violet-vibrant-80: var(--dx-g-violet-80);
125
- --dx-g-violet-vibrant-70: var(--dx-g-violet-70);
126
- --dx-g-violet-vibrant-65: var(--dx-g-violet-65);
127
- --dx-g-violet-vibrant-60: var(--dx-g-violet-60);
128
- --dx-g-violet-vibrant-50: var(--dx-g-violet-50);
129
- --dx-g-violet-vibrant-40: var(--dx-g-violet-40);
130
- --dx-g-violet-vibrant-30: var(--dx-g-violet-30);
131
- --dx-g-violet-vibrant-20: var(--dx-g-violet-20);
132
- --dx-g-violet-vibrant-15: var(--dx-g-violet-15);
133
- --dx-g-violet-vibrant-10: var(--dx-g-violet-10);
134
- --dx-g-pink-vibrant-95: var(--dx-g-pink-95);
135
- --dx-g-pink-vibrant-90: var(--dx-g-pink-90);
136
- --dx-g-pink-vibrant-80: var(--dx-g-pink-80);
137
- --dx-g-pink-vibrant-70: var(--dx-g-pink-70);
138
- --dx-g-pink-vibrant-65: var(--dx-g-pink-65);
139
- --dx-g-pink-vibrant-60: var(--dx-g-pink-60);
140
- --dx-g-pink-vibrant-50: var(--dx-g-pink-50);
141
- --dx-g-pink-vibrant-40: var(--dx-g-pink-40);
142
- --dx-g-pink-vibrant-30: var(--dx-g-pink-30);
143
- --dx-g-pink-vibrant-20: var(--dx-g-pink-20);
144
- --dx-g-pink-vibrant-15: var(--dx-g-pink-15);
145
- --dx-g-pink-vibrant-10: var(--dx-g-pink-10);
146
- --dx-g-red-vibrant-95: var(--dx-g-red-95);
147
- --dx-g-red-vibrant-90: var(--dx-g-red-90);
148
- --dx-g-red-vibrant-80: var(--dx-g-red-80);
149
- --dx-g-red-vibrant-70: var(--dx-g-red-70);
150
- --dx-g-red-vibrant-65: var(--dx-g-red-65);
151
- --dx-g-red-vibrant-60: var(--dx-g-red-60);
152
- --dx-g-red-vibrant-50: var(--dx-g-red-50);
153
- --dx-g-red-vibrant-40: var(--dx-g-red-40);
154
- --dx-g-red-vibrant-30: var(--dx-g-red-30);
155
- --dx-g-red-vibrant-20: var(--dx-g-red-20);
156
- --dx-g-red-vibrant-15: var(--dx-g-red-15);
157
- --dx-g-red-vibrant-10: var(--dx-g-red-10);
158
-
159
- /* Deprecated: use --dx-g-blue-{step}. This scale was a copy of blue. It is not SLDS cloud-blue, a different color. */
160
- --dx-g-cloud-blue-vibrant-95: var(--dx-g-blue-95);
161
- --dx-g-cloud-blue-vibrant-90: var(--dx-g-blue-90);
162
- --dx-g-cloud-blue-vibrant-80: var(--dx-g-blue-80);
163
- --dx-g-cloud-blue-vibrant-70: var(--dx-g-blue-70);
164
- --dx-g-cloud-blue-vibrant-65: var(--dx-g-blue-65);
165
- --dx-g-cloud-blue-vibrant-60: var(--dx-g-blue-60);
166
- --dx-g-cloud-blue-vibrant-50: var(--dx-g-blue-50);
167
- --dx-g-cloud-blue-vibrant-40: var(--dx-g-blue-40);
168
- --dx-g-cloud-blue-vibrant-30: var(--dx-g-blue-30);
169
- --dx-g-cloud-blue-vibrant-20: var(--dx-g-blue-20);
170
- --dx-g-cloud-blue-vibrant-15: var(--dx-g-blue-15);
171
- --dx-g-cloud-blue-vibrant-10: var(--dx-g-blue-10);
172
-
173
- /* Deprecated: use the --dx-g-neutral-{step} shown. Each step points at the nearest neutral, so these warm grays shift slightly. */
174
- --sds-g-gray-1: var(--dx-g-neutral-100);
175
- --sds-g-gray-2: var(--dx-g-neutral-100);
176
- --sds-g-gray-3: var(--dx-g-neutral-95);
177
- --sds-g-gray-4: var(--dx-g-neutral-90);
178
- --sds-g-gray-5: var(--dx-g-neutral-90);
179
- --sds-g-gray-6: var(--dx-g-neutral-80);
180
- --sds-g-gray-7: var(--dx-g-neutral-70);
181
- --sds-g-gray-8: var(--dx-g-neutral-60);
182
- --sds-g-gray-9: var(--dx-g-neutral-50);
183
- --sds-g-gray-10: var(--dx-g-neutral-30);
184
- --sds-g-gray-11: var(--dx-g-neutral-30);
185
- --sds-g-gray-12: var(--dx-g-neutral-15);
186
- --sds-g-gray-13: var(--dx-g-neutral-0);
187
- --sds-g-gray-14: var(--dx-g-neutral-40);
188
- }