@salesforcedevs/dx-css-variables 0.3.47-remediation.1 → 0.3.48

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 (11) hide show
  1. package/assets/css/colors.css +717 -6
  2. package/assets/css/index.css +1 -8
  3. package/assets/css/shadows.css +2 -7
  4. package/assets/css/spacing.css +4 -6
  5. package/assets/css/typography.css +4 -6
  6. package/package.json +1 -8
  7. package/assets/css/colors/brand.css +0 -188
  8. package/assets/css/colors/content-type.css +0 -46
  9. package/assets/css/colors/dark.css +0 -85
  10. package/assets/css/colors/primitives.css +0 -316
  11. package/assets/css/colors/semantic.css +0 -90
package/assets/css/index.css CHANGED
@@ -1,13 +1,6 @@
1
1
  @import './animations.css';
2
2
  @import './breakpoints.css';
3
-
4
- /* Color tiers — primitives first for readability (resolution is order-independent) */
5
- @import './colors/primitives.css';
6
- @import './colors/semantic.css';
7
- @import './colors/brand.css';
8
- @import './colors/content-type.css';
9
- @import './colors/dark.css';
10
-
3
+ @import './colors.css';
11
4
  @import './iconSizes.css';
12
5
  @import './page.css';
13
6
  @import './shadows.css';
package/assets/css/shadows.css CHANGED
@@ -1,12 +1,7 @@
1
1
  :root {
2
2
  /*
3
- Canonical global elevation tokens for the DSC design system, based
4
- on the C360 elevation models. These `--dx-g-*` variables are the
5
- single source of truth for box-shadow values, e.g.
6
- --dx-g-box-shadow-md;
7
-
8
- Prefer referencing these `--dx-g-*` tokens rather than introducing
9
- new raw box-shadow values.
3
+ Shared box-shadows based off C360 eleveation models
4
+ https://app.abstract.com/projects/d597ff5d-4ea0-45c2-9bad-057d0950ede3/branches/master/commits/015ebf994fdc104f4243bc76be9969415a637324/files/ee7b3677-8ebf-48a9-a229-0fa58a99b153/layers/8FD17D54-7983-41CB-BAB5-C6628E15E666?collectionId=8e630596-0ef1-4475-93b6-71e4c064d1e6&collectionLayerId=dae4a0ab-d604-4f2f-a249-2619b389c610&mode=build&selected=root-C04FA5B6-62B6-4943-BFA7-B5D6723AF05C
10
5
  */
11
6
 
12
7
  --dx-g-box-shadow-sm: 0px 0px 2px 0px rgba(24, 24, 24, 0.08),
package/assets/css/spacing.css CHANGED
@@ -1,12 +1,10 @@
1
1
  :root {
2
2
  /*
3
- Canonical global spacing tokens for the DSC design system.
4
- These `--dx-g-*` variables are the single source of truth for
5
- spacing values, e.g.
6
- --dx-g-spacing-md: 16px;
3
+ Shared spacing, like
4
+ --dx-spacing-sm: 96rem;
7
5
 
8
- Prefer referencing these `--dx-g-*` tokens rather than introducing
9
- new raw spacing values.
6
+ Or, if from the C360 design system
7
+ --dx-g-spacing-sm: 96rem;
10
8
  */
11
9
 
12
10
  --dx-g-spacing-2xs: 2px;
package/assets/css/typography.css CHANGED
@@ -2,13 +2,11 @@
2
2
 
3
3
  :root {
4
4
  /*
5
- Canonical global typography tokens for the DSC design system.
6
- These `--dx-g-*` variables are the single source of truth for font
7
- families, weights, and sizes, e.g.
8
- --dx-g-text-base: 16px;
5
+ Shared typography, like
6
+ --dx-specific-font-size: 96rem;
9
7
 
10
- Prefer referencing these `--dx-g-*` tokens rather than introducing
11
- new raw font values.
8
+ Or, if from the C360 design system
9
+ --dx-g-specific-font-size: 96rem;
12
10
  */
13
11
 
14
12
  --dx-g-font-display:
package/package.json CHANGED
@@ -1,18 +1,11 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-css-variables",
3
- "version": "0.3.47-remediation.1",
3
+ "version": "0.3.48",
4
4
  "license": "BSD-3-Clause",
5
5
  "files": [
6
6
  "assets"
7
7
  ],
8
- "scripts": {
9
- "lint": "npm run lint:css",
10
- "lint:css": "stylelint 'assets/css/**/*.css'"
11
- },
12
8
  "publishConfig": {
13
9
  "access": "public"
14
- },
15
- "devDependencies": {
16
- "stylelint": "14.16.1"
17
10
  }
18
11
  }
package/assets/css/colors/brand.css DELETED
@@ -1,188 +0,0 @@
1
- /* Brand theme color tokens. */
2
- :root {
3
- /* ------ */
4
- /* BRAND THEMES */
5
- /* ------ */
6
-
7
- /* DEFAULT THEME (BRANDLESS) */
8
- --dx-g-brand-default-color-background: white;
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
- /* EMPLOYEES */
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
- --dx-g-brand-employees-color-background-2: white;
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
-
26
- /* MARKETING */
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
- --dx-g-brand-marketing-color-background-2: white;
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
-
36
- /* PARTNERS */
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
- --dx-g-brand-partners-color-background-2: white;
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-vibrant-80);
45
-
46
- /* COMMERCE */
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
- --dx-g-brand-commerce-color-background-2: white;
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
-
56
- /* REVENUE */
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
- --dx-g-brand-revenue-color-background-2: white;
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-vibrant-80);
65
-
66
- /* SALES */
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
- --dx-g-brand-sales-color-background-2: white;
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
-
76
- /* SUCCESS */
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
- --dx-g-brand-success-color-background-2: white;
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
-
86
- /* EXPERIENCE */
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
- --dx-g-brand-experience-color-background-2: white;
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
-
96
- /* INTEGRATION */
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
- --dx-g-brand-integration-color-background-2: white;
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
-
106
- /* PLATFORM */
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
- --dx-g-brand-platform-color-background-2: white;
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
-
116
- /* DATA CLOUD */
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
- --dx-g-brand-data-color-background-2: white;
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
-
126
- /* INDUSTRIES */
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
- --dx-g-brand-industries-color-background-2: white;
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
-
136
- /* LEARNING */
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
- --dx-g-brand-learning-color-background-2: white;
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
-
146
- /* SERVICE */
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
- --dx-g-brand-service-color-background-2: white;
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
-
156
- /* ANALYTICS */
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
- --dx-g-brand-analytics-color-background-2: white;
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
-
166
- /* COLLABORATION */
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
- --dx-g-brand-collaboration-color-background-2: white;
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-vibrant-80);
175
-
176
- /* HEROKU */
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
- --dx-g-brand-heroku-color-background-2: white;
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
-
186
- /* SLACK */
187
- --dx-g-brand-slack-color-background: rgba(74, 21, 75, 1);
188
- }
package/assets/css/colors/content-type.css DELETED
@@ -1,46 +0,0 @@
1
- /* Content-type theme color tokens. */
2
- :root {
3
- /* ------ */
4
- /* CONTENT TYPE THEMES */
5
- /* ------ */
6
-
7
- /* DOCUMENTATION */
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
-
11
- /* HELP_DOCUMENTATION */
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
-
15
- /* TRAILHEAD */
16
- --dx-g-content-type-trailhead-color: var(--dx-g-brand-learning-color);
17
- --dx-g-content-type-trailhead-color-background: var(--dx-g-brand-learning-color-background);
18
-
19
- /* BLOG */
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
-
23
- /* FORUM */
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
-
27
- /* API */
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
-
31
- /* EVENT */
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
-
35
- /* WEBSITE */
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
-
39
- /* PODCAST */
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
-
43
- /* COMMUNITY */
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
- }
package/assets/css/colors/dark.css DELETED
@@ -1,85 +0,0 @@
1
- /* Dark-mode overrides for semantic color tokens. */
2
- body.dark {
3
- --dx-g-body-background-color: var(--dx-g-blue-vibrant-10);
4
- --dx-g-hr-font-color: white;
5
-
6
- --dx-g-text-label-color: white;
7
- --dx-g-text-heading-color: white;
8
- --dx-g-text-body-color: white;
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
- --dx-g-social-svg-background-color: white;
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
-
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
- --dx-g-audio-text-color: white;
20
- --dx-g-audio-threedot-menu-text-color: white;
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
-
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
- --dx-podcast-subscription-link-color: white;
28
- --dx-podcast-host-background-color: var(--dx-g-indigo-vibrant-30);
29
-
30
- --dx-g-blog-post-heading-color: white;
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
-
34
- --dx-g-button-primary-color: var(--dx-g-blue-vibrant-50);
35
- --dx-g-button-icon-color: white;
36
- --dx-g-button-secondary-color: white;
37
- --dx-g-button-secondary-color-hover: var(--dx-g-blue-vibrant-80);
38
- --dx-g-button-inline-color: white;
39
- --dx-g-button-inline-color-hover: var(--dx-g-blue-vibrant-80);
40
-
41
- --dx-g-svg-filter: brightness(100);
42
-
43
- --dx-g-dark-mode-toggle-button-border: 1px solid white;
44
- --dx-g-dark-mode-toggle-button-color: transparent;
45
- --dx-g-dark-mode-toggle-icon: url("https://a.sfdcstatic.com/developer-website/images/sun-icon.png");
46
-
47
- --dx-g-light-mode-code-block-border: none;
48
- --dx-g-dark-mode-toggle-code-block-border: 1px solid var(--dx-g-blue-vibrant-40);
49
-
50
- --dx-g-language-picker-background-color: var(--dx-g-indigo-vibrant-50);
51
- --dx-g-language-picker-font-color: white;
52
- --dx-g-language-picker-option-hover-color: var(--dx-g-blue-vibrant-10);
53
- --dx-g-language-picker-option-color: white;
54
- --dx-g-language-picker-checkmark-color: white;
55
-
56
- --dx-blog-grid-themed-left-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-left-dark-mode-2.svg");
57
- --dx-blog-grid-themed-right-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-right-dark-mode.svg");
58
-
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
- --dx-footer-themed-top-border-color: white;
63
- --dx-footer-themed-header-color: white;
64
- --dx-footer-themed-header-link-color: white;
65
- --dx-footer-themed-header-link-hover-color: var(--dx-g-blue-vibrant-80);
66
- --dx-footer-themed-svg-icon-color: white;
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
- --dx-footer-themed-large-graphic: url('https://a.sfdcstatic.com/developer-website/images/footer_graphic_large_dark.svg');
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
-
74
- --dx-themed-featured-content-header-background-swoop: url("https://a.sfdcstatic.com/developer-website/images/swoop_dark_light.png");
75
- --dx-themed-featured-content-header-background-swoop-intense: url("https://a.sfdcstatic.com/developer-website/images/swoop_dark_intense.png");
76
- --dx-themed-featured-content-header-text-color: white;
77
- --dx-themed-featured-content-header-title-link-light-color: white;
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-vibrant-90);
80
- --dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-vibrant-90);
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-vibrant-50);
83
- --dx-themed-featured-content-header-button-background-color: white;
84
- --dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-vibrant-80);
85
- }