@salesforcedevs/dx-css-variables 0.4.1 → 0.4.2-remediation.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.
- package/assets/css/borders.css +20 -0
- package/assets/css/colors/aliases.css +194 -0
- package/assets/css/colors/brand.css +124 -123
- package/assets/css/colors/content-type.css +18 -18
- package/assets/css/colors/dark.css +65 -65
- package/assets/css/colors/primitives.css +151 -172
- package/assets/css/colors/semantic.css +88 -79
- package/assets/css/colors.css +1 -0
- package/assets/css/index.css +2 -0
- package/assets/css/shadows.css +34 -5
- package/assets/css/spacing.css +14 -0
- package/assets/css/transitions.css +33 -5
- package/assets/css/typography.css +69 -0
- package/package.json +1 -1
|
@@ -1,90 +1,99 @@
|
|
|
1
1
|
/* Semantic / surface-role color tokens. */
|
|
2
2
|
:root {
|
|
3
|
+
/* ---------------------- */
|
|
4
|
+
/* TEXT AND SURFACE PAIRS */
|
|
5
|
+
/* ---------------------- */
|
|
6
|
+
/* Each text color sits on the surface named above it. */
|
|
7
|
+
--dx-g-color-surface-default: var(--dx-g-neutral-100);
|
|
8
|
+
--dx-g-color-text-default: var(--dx-g-neutral-10);
|
|
9
|
+
|
|
10
|
+
--dx-g-color-surface-code-inline: var(--dx-g-neutral-95);
|
|
11
|
+
--dx-g-color-text-code: var(--dx-g-neutral-10);
|
|
12
|
+
|
|
3
13
|
/* ----------- */
|
|
4
14
|
/* TEXT COLORS */
|
|
5
15
|
/* ----------- */
|
|
6
|
-
--dx-g-text-button-color: var(--dx-g-blue-
|
|
16
|
+
--dx-g-text-button-color: var(--dx-g-blue-50); /* Deprecated: no use found. Removed under plan 3.3. */
|
|
7
17
|
--dx-g-text-button-light-color: white;
|
|
8
18
|
|
|
9
19
|
/* Defaults for no Dark/Light theme pages */
|
|
10
|
-
--dx-g-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
--dx-g-text-
|
|
14
|
-
--dx-g-
|
|
15
|
-
--dx-g-
|
|
16
|
-
--dx-g-
|
|
17
|
-
--dx-g-
|
|
18
|
-
--dx-
|
|
19
|
-
|
|
20
|
-
--dx-g-
|
|
21
|
-
--dx-g-
|
|
22
|
-
--dx-
|
|
23
|
-
|
|
24
|
-
--dx-g-audio-
|
|
25
|
-
|
|
26
|
-
--dx-
|
|
27
|
-
--dx-
|
|
28
|
-
--dx-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
--dx-
|
|
32
|
-
--dx-
|
|
33
|
-
--dx-
|
|
34
|
-
|
|
35
|
-
--dx-g-
|
|
36
|
-
--dx-g-
|
|
37
|
-
--dx-g-
|
|
38
|
-
|
|
39
|
-
--dx-g-button-
|
|
40
|
-
--dx-g-button-
|
|
41
|
-
|
|
42
|
-
--dx-g-
|
|
43
|
-
|
|
44
|
-
--dx-g-
|
|
45
|
-
|
|
46
|
-
--dx-g-
|
|
47
|
-
|
|
48
|
-
--dx-g-
|
|
49
|
-
--dx-g-dark-mode-toggle-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
--dx-g-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
--dx-g-language-picker-
|
|
57
|
-
--dx-g-language-picker-
|
|
58
|
-
|
|
59
|
-
--dx-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
--dx-
|
|
63
|
-
|
|
64
|
-
--dx-footer-themed-background-color:
|
|
65
|
-
--dx-footer-themed-top-
|
|
66
|
-
--dx-footer-themed-
|
|
67
|
-
--dx-footer-themed-
|
|
68
|
-
--dx-footer-themed-header-color: var(--dx-g-blue-
|
|
69
|
-
--dx-footer-themed-
|
|
70
|
-
--dx-footer-themed-
|
|
71
|
-
--dx-footer-themed-
|
|
72
|
-
--dx-footer-themed-
|
|
73
|
-
--dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-vibrant-20);
|
|
74
|
-
--dx-footer-themed-large-graphic: url('https://a.sfdcstatic.com/developer-website/images/footer-graphic-large-2.svg');
|
|
20
|
+
--dx-g-hr-font-color: var(--dx-g-blue-20); /* Deprecated: use --dx-c-hr-label-color-text. */
|
|
21
|
+
|
|
22
|
+
--dx-g-text-label-color: var(--dx-g-neutral-30);
|
|
23
|
+
--dx-g-text-heading-color: var(--dx-g-blue-20);
|
|
24
|
+
--dx-g-link-hover-color: var(--dx-g-blue-40);
|
|
25
|
+
--dx-g-social-svg-icon-color: white; /* Deprecated: use --dx-c-socials-color-icon. */
|
|
26
|
+
--dx-g-social-svg-background-color: var(--dx-g-blue-50); /* Deprecated: use --dx-c-socials-color-surface. */
|
|
27
|
+
--dx-g-social-svg-hover-color: var(--dx-g-blue-40); /* Deprecated: use --dx-c-socials-color-surface-hover. */
|
|
28
|
+
--dx-card-title-hover-color: var(--dx-g-blue-50); /* Deprecated: use --dx-c-card-title-color-text-hover. */
|
|
29
|
+
|
|
30
|
+
--dx-g-audio-background-color: var(--dx-g-indigo-90); /* Deprecated: use --dx-c-audio-color-surface. */
|
|
31
|
+
--dx-g-audio-inner-div-background-color: var(--dx-g-neutral-100); /* Deprecated: use --dx-c-audio-player-color-surface and --dx-c-audio-menu-color-surface. */
|
|
32
|
+
--dx-g-audio-text-color: initial; /* Deprecated: use --dx-c-audio-color-text. */
|
|
33
|
+
--dx-g-audio-threedot-menu-text-color: initial; /* Deprecated: use --dx-c-audio-menu-color-text. */
|
|
34
|
+
--dx-g-audio-button-hover-color: var(--dx-g-neutral-90); /* Deprecated: use --dx-c-audio-button-color-surface-hover. */
|
|
35
|
+
|
|
36
|
+
--dx-podcast-audio-background-color: var(--dx-g-indigo-90); /* Deprecated: use --dx-c-audio-color-surface. */
|
|
37
|
+
--dx-podcast-audio-inner-div-background-color: var(--dx-g-neutral-100); /* Deprecated: use --dx-c-audio-player-color-surface. */
|
|
38
|
+
--dx-podcast-subscription-link-color: var(--dx-g-blue-50); /* Deprecated: use --dx-c-podcast-subscription-link-color-text. */
|
|
39
|
+
--dx-podcast-host-background-color: white; /* Deprecated: use --dx-c-podcast-host-color-surface. */
|
|
40
|
+
|
|
41
|
+
--dx-g-blog-post-heading-color: currentcolor; /* Deprecated: use --dx-c-blog-post-heading-color-text. */
|
|
42
|
+
--dx-g-blog-post-th-color: var(--dx-g-indigo-95); /* Deprecated: use --dx-c-blog-post-table-header-color-surface. */
|
|
43
|
+
--dx-g-prose-link-color: var(--dx-g-blue-50);
|
|
44
|
+
|
|
45
|
+
--dx-g-button-primary-color: var(--dx-g-blue-50);
|
|
46
|
+
--dx-g-button-secondary-color: var(--dx-g-blue-50);
|
|
47
|
+
--dx-g-button-secondary-color-hover: var(--dx-g-blue-90);
|
|
48
|
+
--dx-g-button-icon-color: currentcolor; /* Deprecated: use --dx-c-button-color-icon. */
|
|
49
|
+
--dx-g-button-inline-color: var(--dx-g-blue-50);
|
|
50
|
+
--dx-g-button-inline-color-hover: var(--dx-g-blue-30);
|
|
51
|
+
|
|
52
|
+
--dx-g-svg-filter: none; /* Deprecated: use --dx-c-footer-graphic-filter. */
|
|
53
|
+
|
|
54
|
+
--dx-g-dark-mode-toggle-button-border: none; /* Deprecated: use --dx-c-theme-switch-border. */
|
|
55
|
+
--dx-g-dark-mode-toggle-button-color: white; /* Deprecated: use --dx-c-theme-switch-color-surface. */
|
|
56
|
+
--dx-g-dark-mode-toggle-icon: url("https://a.sfdcstatic.com/developer-website/images/moon-icon.png"); /* Deprecated: use --dx-c-theme-switch-icon-image. */
|
|
57
|
+
|
|
58
|
+
--dx-g-light-mode-code-block-border: 1px solid black; /* Deprecated: no use found. Removed under plan 3.3. */
|
|
59
|
+
--dx-g-dark-mode-toggle-code-block-border: none; /* Deprecated: use --dx-c-code-block-border. */
|
|
60
|
+
|
|
61
|
+
--dx-g-language-picker-background-color: white; /* Deprecated: use --dx-c-language-selector-color-surface. */
|
|
62
|
+
/* stylelint-disable-next-line color-no-hex -- leftover raw color; fix in a later item, not Q-tier-lint */
|
|
63
|
+
--dx-g-language-picker-font-color: #747474; /* Deprecated: use --dx-c-language-selector-color-text. */
|
|
64
|
+
--dx-g-language-picker-option-hover-color: var(--dx-g-neutral-90); /* Deprecated: use --dx-c-language-selector-option-color-surface-hover. */
|
|
65
|
+
/* stylelint-disable-next-line color-no-hex -- leftover raw color; fix in a later item, not Q-tier-lint */
|
|
66
|
+
--dx-g-language-picker-option-color: #181818; /* Deprecated: use --dx-c-language-selector-option-color-text. */
|
|
67
|
+
--dx-g-language-picker-checkmark-color: var(--dx-g-indigo-50); /* Deprecated: use --dx-c-language-selector-checkmark-color-icon. */
|
|
68
|
+
|
|
69
|
+
--dx-blog-grid-themed-left-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-left.svg"); /* Deprecated: no use found. Removed under plan 3.3. */
|
|
70
|
+
--dx-blog-grid-themed-right-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-right.svg"); /* Deprecated: no use found. Removed under plan 3.3. */
|
|
71
|
+
|
|
72
|
+
--dx-footer-themed-background-color: var(--dx-g-indigo-95); /* Deprecated: use --dx-c-footer-color-surface. */
|
|
73
|
+
--dx-footer-themed-top-background-color: var(--dx-g-indigo-95); /* Deprecated: use --dx-c-footer-top-color-surface. */
|
|
74
|
+
--dx-footer-themed-top-large-background-color: white; /* Deprecated: use --dx-c-footer-top-large-color-surface. */
|
|
75
|
+
--dx-footer-themed-top-border-color: var(--dx-g-indigo-30); /* Deprecated: use --dx-c-footer-top-color-border. */
|
|
76
|
+
--dx-footer-themed-header-color: var(--dx-g-blue-20); /* Deprecated: use --dx-c-footer-heading-color-text. */
|
|
77
|
+
--dx-footer-themed-header-link-color: var(--dx-g-blue-40); /* Deprecated: use --dx-c-footer-option-link-color-text. */
|
|
78
|
+
--dx-footer-themed-header-link-hover-color: var(--dx-g-blue-20); /* Deprecated: use --dx-c-footer-option-link-color-text-hover. */
|
|
79
|
+
--dx-footer-themed-svg-icon-color: var(--dx-g-blue-20); /* Deprecated: use --dx-c-footer-color-icon. */
|
|
80
|
+
--dx-footer-themed-svg-background-color: white; /* Deprecated: no use found. Removed under plan 3.3. */
|
|
81
|
+
--dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-20); /* Deprecated: use --dx-c-footer-terms-color-surface. */
|
|
82
|
+
--dx-footer-themed-large-graphic: url('https://a.sfdcstatic.com/developer-website/images/footer-graphic-large-2.svg'); /* Deprecated: use --dx-c-footer-graphic-image. */
|
|
75
83
|
|
|
76
84
|
--dx-g-background-color: white;
|
|
77
|
-
--dx-g-title-hover-color: var(--dx-g-blue-
|
|
78
|
-
|
|
79
|
-
--dx-themed-featured-content-header-background-swoop: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_light.png");
|
|
80
|
-
--dx-themed-featured-content-header-background-swoop-intense: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_intense.png");
|
|
81
|
-
--dx-themed-featured-content-header-text-color: var(--dx-g-indigo-
|
|
82
|
-
--dx-themed-featured-content-header-title-link-light-color: var(--dx-g-blue-
|
|
83
|
-
--dx-themed-featured-content-header-title-link-intense-color: white;
|
|
84
|
-
--dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-blue-
|
|
85
|
-
--dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-
|
|
86
|
-
|
|
87
|
-
--dx-themed-featured-content-header-
|
|
88
|
-
--dx-themed-featured-content-header-button-
|
|
89
|
-
--dx-themed-featured-content-header-button-background-
|
|
85
|
+
--dx-g-title-hover-color: var(--dx-g-blue-40); /* Deprecated: no use found. Removed under plan 3.3. */
|
|
86
|
+
|
|
87
|
+
--dx-themed-featured-content-header-background-swoop: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_light.png"); /* Deprecated: use --dx-c-featured-content-header-swoop-image. */
|
|
88
|
+
--dx-themed-featured-content-header-background-swoop-intense: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_intense.png"); /* Deprecated: use --dx-c-featured-content-header-intense-swoop-image. */
|
|
89
|
+
--dx-themed-featured-content-header-text-color: var(--dx-g-indigo-40); /* Deprecated: use --dx-c-featured-content-header-color-text. */
|
|
90
|
+
--dx-themed-featured-content-header-title-link-light-color: var(--dx-g-blue-20); /* Deprecated: no use found. Removed under plan 3.3. */
|
|
91
|
+
--dx-themed-featured-content-header-title-link-intense-color: white; /* Deprecated: no use found. Removed under plan 3.3. */
|
|
92
|
+
--dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-blue-10); /* Deprecated: use --dx-c-featured-content-header-title-link-color-text-hover. */
|
|
93
|
+
--dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-90); /* Deprecated: use --dx-c-featured-content-header-intense-title-link-color-text-hover. */
|
|
94
|
+
/* stylelint-disable-next-line function-disallowed-list -- leftover raw color; fix in a later item, not Q-tier-lint */
|
|
95
|
+
--dx-themed-featured-content-header-intense-label-color: rgb(190 199 246); /* Deprecated: use --dx-c-featured-content-header-intense-label-color-text. */
|
|
96
|
+
--dx-themed-featured-content-header-button-color: white; /* Deprecated: use --dx-c-featured-content-header-button-color-text. */
|
|
97
|
+
--dx-themed-featured-content-header-button-background-color: var(--dx-g-blue-50); /* Deprecated: use --dx-c-featured-content-header-button-color-surface. */
|
|
98
|
+
--dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-40); /* Deprecated: use --dx-c-featured-content-header-button-color-surface-hover. */
|
|
90
99
|
}
|
package/assets/css/colors.css
CHANGED
package/assets/css/index.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import './animations.css';
|
|
2
|
+
@import './borders.css';
|
|
2
3
|
@import './breakpoints.css';
|
|
3
4
|
|
|
4
5
|
/* Color tiers — primitives first for readability (resolution is order-independent) */
|
|
@@ -7,6 +8,7 @@
|
|
|
7
8
|
@import './colors/brand.css';
|
|
8
9
|
@import './colors/content-type.css';
|
|
9
10
|
@import './colors/dark.css';
|
|
11
|
+
@import './colors/aliases.css';
|
|
10
12
|
|
|
11
13
|
@import './iconSizes.css';
|
|
12
14
|
@import './page.css';
|
package/assets/css/shadows.css
CHANGED
|
@@ -3,17 +3,46 @@
|
|
|
3
3
|
Canonical global elevation tokens for the DSC design system, based
|
|
4
4
|
on the C360 elevation models. These `--dx-g-*` variables are the
|
|
5
5
|
single source of truth for box-shadow values, e.g.
|
|
6
|
-
--dx-g-
|
|
6
|
+
--dx-g-elevation-shadow-2;
|
|
7
7
|
|
|
8
8
|
Prefer referencing these `--dx-g-*` tokens rather than introducing
|
|
9
9
|
new raw box-shadow values.
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
/* Levels 1 to 4 share the one border. A component's hooks pick its levels. */
|
|
13
|
+
--dx-g-elevation-shadow-1: 0px 0px 2px 0px rgba(24, 24, 24, 0.08),
|
|
13
14
|
0px 2px 4px 1px rgba(24, 24, 24, 0.16);
|
|
14
|
-
--dx-g-
|
|
15
|
+
--dx-g-elevation-shadow-2: 0px 2px 8px -2px rgba(24, 24, 24, 0.08),
|
|
15
16
|
0px 8px 12px -2px rgba(24, 24, 24, 0.16);
|
|
16
|
-
--dx-g-
|
|
17
|
+
--dx-g-elevation-shadow-3: 0px 12px 24px -4px rgba(24, 24, 24, 0.08),
|
|
17
18
|
0px 16px 32px -4px rgba(24, 24, 24, 0.16);
|
|
18
|
-
--dx-g-
|
|
19
|
+
--dx-g-elevation-shadow-4: 0px 24px 48px -4px rgba(24, 24, 24, 0.2);
|
|
20
|
+
--dx-g-elevation-border-default: 1px solid rgba(24, 24, 24, 0.04); /* neutral-10 at 4% */
|
|
21
|
+
|
|
22
|
+
/*
|
|
23
|
+
Focus ring. On :focus-visible, a control sets outline to the outline
|
|
24
|
+
token, outline-offset to one offset, and box-shadow to the matching
|
|
25
|
+
shadow. On a raised card, the focus shadow goes first in the box-shadow
|
|
26
|
+
list, before the elevation shadow.
|
|
27
|
+
*/
|
|
28
|
+
--dx-g-focus-color-inner: var(--dx-g-neutral-100);
|
|
29
|
+
--dx-g-focus-color-outer: var(--dx-g-blue-60);
|
|
30
|
+
--dx-g-focus-outline-default: 2px solid var(--dx-g-focus-color-outer);
|
|
31
|
+
--dx-g-focus-offset-outset: 2px;
|
|
32
|
+
--dx-g-focus-offset-inset: -2px;
|
|
33
|
+
--dx-g-focus-shadow-outset: 0 0 0 2px var(--dx-g-focus-color-inner);
|
|
34
|
+
--dx-g-focus-shadow-inset: inset 0 0 0 4px var(--dx-g-focus-color-inner);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/*
|
|
38
|
+
Deprecated shadow names (remediation 1.8). Each old name points at its
|
|
39
|
+
elevation level. Set on body.dark as well as :root so each alias follows
|
|
40
|
+
the new name there.
|
|
41
|
+
*/
|
|
42
|
+
:root,
|
|
43
|
+
body.dark {
|
|
44
|
+
--dx-g-box-shadow-sm: var(--dx-g-elevation-shadow-1); /* Deprecated: use --dx-g-elevation-shadow-1. */
|
|
45
|
+
--dx-g-box-shadow-md: var(--dx-g-elevation-shadow-2); /* Deprecated: use --dx-g-elevation-shadow-2. */
|
|
46
|
+
--dx-g-box-shadow-lg: var(--dx-g-elevation-shadow-3); /* Deprecated: use --dx-g-elevation-shadow-3. */
|
|
47
|
+
--dx-g-box-shadow-xl: var(--dx-g-elevation-shadow-4); /* Deprecated: use --dx-g-elevation-shadow-4. */
|
|
19
48
|
}
|
package/assets/css/spacing.css
CHANGED
|
@@ -22,4 +22,18 @@
|
|
|
22
22
|
--dx-g-spacing-4xl: 64px;
|
|
23
23
|
--dx-g-spacing-5xl: 96px;
|
|
24
24
|
--dx-g-spacing-6xl: 128px;
|
|
25
|
+
|
|
26
|
+
/* Space above and below each heading level */
|
|
27
|
+
--dx-g-space-above-h1: var(--dx-g-spacing-2xl);
|
|
28
|
+
--dx-g-space-below-h1: var(--dx-g-spacing-md);
|
|
29
|
+
--dx-g-space-above-h2: var(--dx-g-spacing-2xl);
|
|
30
|
+
--dx-g-space-below-h2: var(--dx-g-spacing-md);
|
|
31
|
+
--dx-g-space-above-h3: var(--dx-g-spacing-xl);
|
|
32
|
+
--dx-g-space-below-h3: var(--dx-g-spacing-md);
|
|
33
|
+
--dx-g-space-above-h4: var(--dx-g-spacing-lg);
|
|
34
|
+
--dx-g-space-below-h4: var(--dx-g-spacing-sm);
|
|
35
|
+
--dx-g-space-above-h5: var(--dx-g-spacing-md);
|
|
36
|
+
--dx-g-space-below-h5: var(--dx-g-spacing-sm);
|
|
37
|
+
--dx-g-space-above-h6: var(--dx-g-spacing-sm);
|
|
38
|
+
--dx-g-space-below-h6: var(--dx-g-spacing-sm);
|
|
25
39
|
}
|
|
@@ -1,10 +1,38 @@
|
|
|
1
1
|
:root {
|
|
2
|
+
/*
|
|
3
|
+
Motion. Short is for color, fill, border, and shadow changes on hover.
|
|
4
|
+
Medium is for a card's shadow, transforms, and filters. Long is for a
|
|
5
|
+
panel or message that moves in or out. Color fades keep `linear`
|
|
6
|
+
written out; there is no token for it.
|
|
7
|
+
*/
|
|
8
|
+
--dx-g-motion-duration-short: 0.15s;
|
|
9
|
+
--dx-g-motion-duration-medium: 0.3s;
|
|
10
|
+
--dx-g-motion-duration-long: 0.4s;
|
|
11
|
+
--dx-g-motion-easing-default: ease-in-out;
|
|
12
|
+
|
|
2
13
|
/*
|
|
3
14
|
Shared transitions
|
|
4
15
|
*/
|
|
5
|
-
--dx-g-transition-hue-1x:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
--dx-g-transition-
|
|
16
|
+
--dx-g-transition-hue-1x:
|
|
17
|
+
background var(--dx-g-motion-duration-short) linear, color var(--dx-g-motion-duration-short) linear,
|
|
18
|
+
border-color var(--dx-g-motion-duration-short) linear, opacity var(--dx-g-motion-duration-short) linear,
|
|
19
|
+
fill var(--dx-g-motion-duration-short) linear; /* Deprecated: write the transition with the motion tokens. Removed under plan 3.3. */
|
|
20
|
+
--dx-g-transition-box-shadow-1x: box-shadow var(--dx-g-motion-duration-short) var(--dx-g-motion-easing-default); /* Deprecated: write the transition with the motion tokens. Removed under plan 3.3. */
|
|
21
|
+
--dx-g-transition-box-shadow-2x: box-shadow var(--dx-g-motion-duration-medium) var(--dx-g-motion-easing-default); /* Deprecated: write the transition with the motion tokens. Removed under plan 3.3. */
|
|
22
|
+
--dx-g-transition-transform-2x: transform var(--dx-g-motion-duration-medium) var(--dx-g-motion-easing-default); /* Deprecated: write the transition with the motion tokens. Removed under plan 3.3. */
|
|
23
|
+
--dx-g-transition-filter-2x: filter var(--dx-g-motion-duration-medium) linear; /* Deprecated: write the transition with the motion tokens. Removed under plan 3.3. */
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
When a person's system asks for reduced motion, every transition that reads
|
|
28
|
+
the durations, including the old transition names above, finishes at once.
|
|
29
|
+
0.01ms in place of 0, because a browser skips the "transition ended" event
|
|
30
|
+
at 0, and code that waits for that event would stop.
|
|
31
|
+
*/
|
|
32
|
+
@media (prefers-reduced-motion: reduce) {
|
|
33
|
+
:root {
|
|
34
|
+
--dx-g-motion-duration-short: 0.01ms;
|
|
35
|
+
--dx-g-motion-duration-medium: 0.01ms;
|
|
36
|
+
--dx-g-motion-duration-long: 0.01ms;
|
|
37
|
+
}
|
|
10
38
|
}
|
|
@@ -35,6 +35,75 @@
|
|
|
35
35
|
--dx-g-text-5xl: 56px; /* 3.5rem */
|
|
36
36
|
--dx-g-text-6xl: 80px; /* 5rem */
|
|
37
37
|
|
|
38
|
+
--dx-g-font-family-heading: var(--dx-g-font-display);
|
|
39
|
+
--dx-g-font-family-body: var(--dx-g-font-sans);
|
|
40
|
+
--dx-g-font-family-code: var(--dx-g-font-mono);
|
|
41
|
+
--dx-g-font-weight-heading: var(--dx-g-font-demi);
|
|
42
|
+
--dx-g-font-weight-body-strong: var(--dx-g-font-bold);
|
|
43
|
+
--dx-g-font-weight-action: var(--dx-g-font-bold);
|
|
44
|
+
|
|
45
|
+
/* Display scale. Letter spacing is the WES value, in em so it scales with the size. */
|
|
46
|
+
--dx-g-font-size-display-1: var(--dx-g-text-6xl);
|
|
47
|
+
--dx-g-font-line-height-display-1: 88px;
|
|
48
|
+
--dx-g-font-letter-spacing-display-1: -0.018em;
|
|
49
|
+
--dx-g-font-size-display-2: var(--dx-g-text-5xl);
|
|
50
|
+
--dx-g-font-line-height-display-2: 64px;
|
|
51
|
+
--dx-g-font-letter-spacing-display-2: -0.012em;
|
|
52
|
+
--dx-g-font-size-display-3: var(--dx-g-text-4xl);
|
|
53
|
+
--dx-g-font-line-height-display-3: 56px;
|
|
54
|
+
--dx-g-font-letter-spacing-display-3: -0.01em;
|
|
55
|
+
--dx-g-font-size-display-4: var(--dx-g-text-3xl);
|
|
56
|
+
--dx-g-font-line-height-display-4: 48px;
|
|
57
|
+
--dx-g-font-letter-spacing-display-4: -0.008em;
|
|
58
|
+
--dx-g-font-size-display-5: var(--dx-g-text-2xl);
|
|
59
|
+
--dx-g-font-line-height-display-5: 40px;
|
|
60
|
+
--dx-g-font-letter-spacing-display-5: -0.004em;
|
|
61
|
+
--dx-g-font-size-display-6: var(--dx-g-text-xl);
|
|
62
|
+
--dx-g-font-line-height-display-6: 32px;
|
|
63
|
+
--dx-g-font-letter-spacing-display-6: -0.004em;
|
|
64
|
+
--dx-g-font-size-display-7: var(--dx-g-text-lg);
|
|
65
|
+
--dx-g-font-line-height-display-7: 28px;
|
|
66
|
+
--dx-g-font-letter-spacing-display-7: -0.004em;
|
|
67
|
+
--dx-g-font-size-display-8: var(--dx-g-text-base);
|
|
68
|
+
--dx-g-font-line-height-display-8: 24px;
|
|
69
|
+
--dx-g-font-letter-spacing-display-8: 0.005em;
|
|
70
|
+
|
|
71
|
+
/* Headings. H1 to H4 point at a display step. H5 and H6 use the smaller text sizes. */
|
|
72
|
+
--dx-g-font-size-h1: var(--dx-g-font-size-display-4);
|
|
73
|
+
--dx-g-font-line-height-h1: var(--dx-g-font-line-height-display-4);
|
|
74
|
+
--dx-g-font-letter-spacing-h1: var(--dx-g-font-letter-spacing-display-4);
|
|
75
|
+
--dx-g-font-size-h2: var(--dx-g-font-size-display-5);
|
|
76
|
+
--dx-g-font-line-height-h2: var(--dx-g-font-line-height-display-5);
|
|
77
|
+
--dx-g-font-letter-spacing-h2: var(--dx-g-font-letter-spacing-display-5);
|
|
78
|
+
--dx-g-font-size-h3: var(--dx-g-font-size-display-6);
|
|
79
|
+
--dx-g-font-line-height-h3: var(--dx-g-font-line-height-display-6);
|
|
80
|
+
--dx-g-font-letter-spacing-h3: var(--dx-g-font-letter-spacing-display-6);
|
|
81
|
+
--dx-g-font-size-h4: var(--dx-g-font-size-display-8);
|
|
82
|
+
--dx-g-font-line-height-h4: var(--dx-g-font-line-height-display-8);
|
|
83
|
+
--dx-g-font-letter-spacing-h4: var(--dx-g-font-letter-spacing-display-8);
|
|
84
|
+
--dx-g-font-size-h5: var(--dx-g-text-sm);
|
|
85
|
+
--dx-g-font-line-height-h5: 20px;
|
|
86
|
+
--dx-g-font-letter-spacing-h5: var(--dx-g-font-letter-spacing-display-8);
|
|
87
|
+
--dx-g-font-size-h6: var(--dx-g-text-xs);
|
|
88
|
+
--dx-g-font-line-height-h6: 16px;
|
|
89
|
+
--dx-g-font-letter-spacing-h6: var(--dx-g-font-letter-spacing-display-8);
|
|
90
|
+
|
|
91
|
+
/* Body: any text that is not a heading, display text, code, or a control label */
|
|
92
|
+
--dx-g-font-size-body-1: var(--dx-g-text-lg);
|
|
93
|
+
--dx-g-font-line-height-body-1: 30px;
|
|
94
|
+
--dx-g-font-size-body-2: var(--dx-g-text-base);
|
|
95
|
+
--dx-g-font-line-height-body-2: 24px;
|
|
96
|
+
--dx-g-font-size-body-3: var(--dx-g-text-sm);
|
|
97
|
+
--dx-g-font-line-height-body-3: 20px;
|
|
98
|
+
--dx-g-font-size-body-4: var(--dx-g-text-xs);
|
|
99
|
+
--dx-g-font-line-height-body-4: 18px;
|
|
100
|
+
|
|
101
|
+
/* Control labels: buttons, stateful buttons, chips, and the menu's button */
|
|
102
|
+
--dx-g-font-size-action-1: var(--dx-g-text-base);
|
|
103
|
+
--dx-g-font-line-height-action-1: 28px;
|
|
104
|
+
--dx-g-font-size-action-2: var(--dx-g-text-sm);
|
|
105
|
+
--dx-g-font-line-height-action-2: 20px;
|
|
106
|
+
|
|
38
107
|
-webkit-font-smoothing: antialiased;
|
|
39
108
|
-moz-osx-font-smoothing: grayscale;
|
|
40
109
|
text-rendering: optimizeLegibility;
|