@hashicorp/design-system-tokens 1.11.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/cloud-email/helpers/color.css +47 -0
- package/dist/cloud-email/helpers/elevation.css +18 -0
- package/dist/cloud-email/helpers/focus-ring.css +7 -0
- package/dist/cloud-email/helpers/typography.css +23 -0
- package/dist/cloud-email/tokens.scss +235 -0
- package/dist/devdot/css/helpers/color.css +1 -1
- package/dist/devdot/css/helpers/elevation.css +3 -3
- package/dist/devdot/css/helpers/focus-ring.css +1 -1
- package/dist/devdot/css/helpers/typography.css +1 -1
- package/dist/devdot/css/tokens.css +21 -19
- package/dist/docs/products/tokens.json +456 -408
- package/dist/marketing/css/helpers/color.css +1 -1
- package/dist/marketing/css/helpers/elevation.css +3 -3
- package/dist/marketing/css/helpers/focus-ring.css +1 -1
- package/dist/marketing/css/helpers/typography.css +1 -1
- package/dist/marketing/css/tokens.css +21 -19
- package/dist/marketing/tokens.json +614 -558
- package/dist/products/css/helpers/color.css +1 -1
- package/dist/products/css/helpers/elevation.css +3 -3
- package/dist/products/css/helpers/focus-ring.css +1 -1
- package/dist/products/css/helpers/typography.css +1 -1
- package/dist/products/css/tokens.css +21 -19
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @hashicorp/design-system-tokens
|
|
2
2
|
|
|
3
|
+
## 2.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
Added new pipeline to Style Dictionary for `cloud-email` - `email/sass-variables` to be used in email templating
|
|
8
|
+
|
|
9
|
+
<small class="doc-whats-new-changelog-metadata">[#1965](https://github.com/hashicorp/design-system/pull/1965)</small>
|
|
10
|
+
|
|
11
|
+
<div class="doc-whats-new-changelog-separator"></div>
|
|
12
|
+
|
|
13
|
+
## 2.0.0
|
|
14
|
+
|
|
15
|
+
### Major Changes
|
|
16
|
+
|
|
17
|
+
New tokens added for large and medium size `Tab` variants. The "medium" tokens replace the former equivalent tokens which were not differentiated by size.
|
|
18
|
+
|
|
19
|
+
- `--token-tabs-tab-height-medium` (**Replaces `--token-tabs-tab-height`**)
|
|
20
|
+
- `--token-tabs-tab-height-large` (**New**)
|
|
21
|
+
- `--token-tabs-tab-padding-horizontal-medium` (**Replaces `--token-tabs-tab-padding-horizontal`**)
|
|
22
|
+
- `--token-tabs-tab-padding-horizontal-large` (**New**)
|
|
23
|
+
|
|
24
|
+
<small class="doc-whats-new-changelog-metadata">[#1937](https://github.com/hashicorp/design-system/pull/1937)</small>
|
|
25
|
+
|
|
26
|
+
<div class="doc-whats-new-changelog-separator"></div>
|
|
27
|
+
|
|
3
28
|
## 1.11.0
|
|
4
29
|
|
|
5
30
|
### Minor Changes
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 05 Mar 2024 09:58:47 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.hds-border-primary { border: 1px solid #656a7633; }
|
|
7
|
+
.hds-border-faint { border: 1px solid #656a761a; }
|
|
8
|
+
.hds-border-strong { border: 1px solid #3b3d4566; }
|
|
9
|
+
.hds-border-action { border: 1px solid #cce3fe; }
|
|
10
|
+
.hds-border-highlight { border: 1px solid #ead2fe; }
|
|
11
|
+
.hds-border-success { border: 1px solid #cceeda; }
|
|
12
|
+
.hds-border-warning { border: 1px solid #fbeabf; }
|
|
13
|
+
.hds-border-critical { border: 1px solid #fbd4d4; }
|
|
14
|
+
.hds-foreground-strong { color: #0c0c0e; }
|
|
15
|
+
.hds-foreground-primary { color: #3b3d45; }
|
|
16
|
+
.hds-foreground-faint { color: #656a76; }
|
|
17
|
+
.hds-foreground-high-contrast { color: #ffffff; }
|
|
18
|
+
.hds-foreground-disabled { color: #8c909c; }
|
|
19
|
+
.hds-foreground-action { color: #1060ff; }
|
|
20
|
+
.hds-foreground-action-hover { color: #0c56e9; }
|
|
21
|
+
.hds-foreground-action-active { color: #0046d1; }
|
|
22
|
+
.hds-foreground-highlight { color: #a737ff; }
|
|
23
|
+
.hds-foreground-highlight-on-surface { color: #911ced; }
|
|
24
|
+
.hds-foreground-highlight-high-contrast { color: #42215b; }
|
|
25
|
+
.hds-foreground-success { color: #008a22; }
|
|
26
|
+
.hds-foreground-success-on-surface { color: #00781e; }
|
|
27
|
+
.hds-foreground-success-high-contrast { color: #054220; }
|
|
28
|
+
.hds-foreground-warning { color: #bb5a00; }
|
|
29
|
+
.hds-foreground-warning-on-surface { color: #9e4b00; }
|
|
30
|
+
.hds-foreground-warning-high-contrast { color: #542800; }
|
|
31
|
+
.hds-foreground-critical { color: #e52228; }
|
|
32
|
+
.hds-foreground-critical-on-surface { color: #c00005; }
|
|
33
|
+
.hds-foreground-critical-high-contrast { color: #51130a; }
|
|
34
|
+
.hds-page-primary { background-color: #ffffff; }
|
|
35
|
+
.hds-page-faint { background-color: #fafafa; }
|
|
36
|
+
.hds-surface-primary { background-color: #ffffff; }
|
|
37
|
+
.hds-surface-faint { background-color: #fafafa; }
|
|
38
|
+
.hds-surface-strong { background-color: #f1f2f3; }
|
|
39
|
+
.hds-surface-interactive { background-color: #ffffff; }
|
|
40
|
+
.hds-surface-interactive-hover { background-color: #f1f2f3; }
|
|
41
|
+
.hds-surface-interactive-active { background-color: #dedfe3; }
|
|
42
|
+
.hds-surface-interactive-disabled { background-color: #fafafa; }
|
|
43
|
+
.hds-surface-action { background-color: #f2f8ff; }
|
|
44
|
+
.hds-surface-highlight { background-color: #f9f2ff; }
|
|
45
|
+
.hds-surface-success { background-color: #f2fbf6; }
|
|
46
|
+
.hds-surface-warning { background-color: #fff9e8; }
|
|
47
|
+
.hds-surface-critical { background-color: #fff5f5; }
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 05 Mar 2024 09:58:47 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.hds-elevation-high { box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633); }
|
|
7
|
+
.hds-elevation-higher { box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640); }
|
|
8
|
+
.hds-elevation-inset { box-shadow: inset 0px 1px 2px 1px #656a761a); }
|
|
9
|
+
.hds-elevation-low { box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d); }
|
|
10
|
+
.hds-elevation-mid { box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633); }
|
|
11
|
+
.hds-elevation-overlay { box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559); }
|
|
12
|
+
.hds-surface-inset { box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; }
|
|
13
|
+
.hds-surface-base { box-shadow: 0 0 0 1px #656a7633; }
|
|
14
|
+
.hds-surface-low { box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; }
|
|
15
|
+
.hds-surface-mid { box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; }
|
|
16
|
+
.hds-surface-high { box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633; }
|
|
17
|
+
.hds-surface-higher { box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640; }
|
|
18
|
+
.hds-surface-overlay { box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; }
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 05 Mar 2024 09:58:47 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.hds-focus-ring-action-box-shadow { box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; }
|
|
7
|
+
.hds-focus-ring-critical-box-shadow { box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578; }
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 05 Mar 2024 10:10:42 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.hds-font-family-sans-display { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; }
|
|
7
|
+
.hds-font-family-sans-text { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; }
|
|
8
|
+
.hds-font-family-mono-code { font-family: ui-monospace, Menlo, Consolas, monospace; }
|
|
9
|
+
.hds-font-weight-regular { font-weight: 400; }
|
|
10
|
+
.hds-font-weight-medium { font-weight: 500; }
|
|
11
|
+
.hds-font-weight-semibold { font-weight: 600; }
|
|
12
|
+
.hds-font-weight-bold { font-weight: 700; }
|
|
13
|
+
.hds-typography-display-500 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 30px; line-height: 1.2666; margin: 0; padding: 0; }
|
|
14
|
+
.hds-typography-display-400 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 24px; line-height: 1.3333; margin: 0; padding: 0; }
|
|
15
|
+
.hds-typography-display-300 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 18px; line-height: 1.3333; margin: 0; padding: 0; }
|
|
16
|
+
.hds-typography-display-200 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; }
|
|
17
|
+
.hds-typography-display-100 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 13px; line-height: 1.3846; margin: 0; padding: 0; }
|
|
18
|
+
.hds-typography-body-300 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; }
|
|
19
|
+
.hds-typography-body-200 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 14px; line-height: 1.4286; margin: 0; padding: 0; }
|
|
20
|
+
.hds-typography-body-100 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-size: 13px; line-height: 1.3846; margin: 0; padding: 0; }
|
|
21
|
+
.hds-typography-code-100 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.23; margin: 0; padding: 0; }
|
|
22
|
+
.hds-typography-code-200 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.125; margin: 0; padding: 0; }
|
|
23
|
+
.hds-typography-code-300 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.25; margin: 0; padding: 0; }
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Tue, 05 Mar 2024 10:10:42 GMT
|
|
4
|
+
|
|
5
|
+
$token-color-palette-blue-500: #1c345f;
|
|
6
|
+
$token-color-palette-blue-400: #0046d1;
|
|
7
|
+
$token-color-palette-blue-300: #0c56e9;
|
|
8
|
+
$token-color-palette-blue-200: #1060ff;
|
|
9
|
+
$token-color-palette-blue-100: #cce3fe;
|
|
10
|
+
$token-color-palette-blue-50: #f2f8ff;
|
|
11
|
+
$token-color-palette-purple-500: #42215b;
|
|
12
|
+
$token-color-palette-purple-400: #7b00db;
|
|
13
|
+
$token-color-palette-purple-300: #911ced;
|
|
14
|
+
$token-color-palette-purple-200: #a737ff;
|
|
15
|
+
$token-color-palette-purple-100: #ead2fe;
|
|
16
|
+
$token-color-palette-purple-50: #f9f2ff;
|
|
17
|
+
$token-color-palette-green-500: #054220;
|
|
18
|
+
$token-color-palette-green-400: #006619;
|
|
19
|
+
$token-color-palette-green-300: #00781e;
|
|
20
|
+
$token-color-palette-green-200: #008a22;
|
|
21
|
+
$token-color-palette-green-100: #cceeda;
|
|
22
|
+
$token-color-palette-green-50: #f2fbf6;
|
|
23
|
+
$token-color-palette-amber-500: #542800;
|
|
24
|
+
$token-color-palette-amber-400: #803d00;
|
|
25
|
+
$token-color-palette-amber-300: #9e4b00;
|
|
26
|
+
$token-color-palette-amber-200: #bb5a00;
|
|
27
|
+
$token-color-palette-amber-100: #fbeabf;
|
|
28
|
+
$token-color-palette-amber-50: #fff9e8;
|
|
29
|
+
$token-color-palette-red-500: #51130a;
|
|
30
|
+
$token-color-palette-red-400: #940004;
|
|
31
|
+
$token-color-palette-red-300: #c00005;
|
|
32
|
+
$token-color-palette-red-200: #e52228;
|
|
33
|
+
$token-color-palette-red-100: #fbd4d4;
|
|
34
|
+
$token-color-palette-red-50: #fff5f5;
|
|
35
|
+
$token-color-palette-neutral-700: #0c0c0e;
|
|
36
|
+
$token-color-palette-neutral-600: #3b3d45;
|
|
37
|
+
$token-color-palette-neutral-500: #656a76;
|
|
38
|
+
$token-color-palette-neutral-400: #8c909c;
|
|
39
|
+
$token-color-palette-neutral-300: #c2c5cb;
|
|
40
|
+
$token-color-palette-neutral-200: #dedfe3;
|
|
41
|
+
$token-color-palette-neutral-100: #f1f2f3;
|
|
42
|
+
$token-color-palette-neutral-50: #fafafa;
|
|
43
|
+
$token-color-palette-neutral-0: #ffffff;
|
|
44
|
+
$token-color-palette-alpha-300: #3b3d4566;
|
|
45
|
+
$token-color-palette-alpha-200: #656a7633;
|
|
46
|
+
$token-color-palette-alpha-100: #656a761a;
|
|
47
|
+
$token-color-border-primary: #656a7633;
|
|
48
|
+
$token-color-border-faint: #656a761a;
|
|
49
|
+
$token-color-border-strong: #3b3d4566;
|
|
50
|
+
$token-color-border-action: #cce3fe;
|
|
51
|
+
$token-color-border-highlight: #ead2fe;
|
|
52
|
+
$token-color-border-success: #cceeda;
|
|
53
|
+
$token-color-border-warning: #fbeabf;
|
|
54
|
+
$token-color-border-critical: #fbd4d4;
|
|
55
|
+
$token-color-focus-action-internal: #0c56e9;
|
|
56
|
+
$token-color-focus-action-external: #5990ff; // this is a special color used only for the focus style, to pass color contrast for a11y purpose
|
|
57
|
+
$token-color-focus-critical-internal: #c00005;
|
|
58
|
+
$token-color-focus-critical-external: #dd7578; // this is a special color used only for the focus style, to pass color contrast for a11y purpose
|
|
59
|
+
$token-color-foreground-strong: #0c0c0e;
|
|
60
|
+
$token-color-foreground-primary: #3b3d45;
|
|
61
|
+
$token-color-foreground-faint: #656a76;
|
|
62
|
+
$token-color-foreground-high-contrast: #ffffff;
|
|
63
|
+
$token-color-foreground-disabled: #8c909c;
|
|
64
|
+
$token-color-foreground-action: #1060ff;
|
|
65
|
+
$token-color-foreground-action-hover: #0c56e9;
|
|
66
|
+
$token-color-foreground-action-active: #0046d1;
|
|
67
|
+
$token-color-foreground-highlight: #a737ff;
|
|
68
|
+
$token-color-foreground-highlight-on-surface: #911ced;
|
|
69
|
+
$token-color-foreground-highlight-high-contrast: #42215b;
|
|
70
|
+
$token-color-foreground-success: #008a22;
|
|
71
|
+
$token-color-foreground-success-on-surface: #00781e;
|
|
72
|
+
$token-color-foreground-success-high-contrast: #054220;
|
|
73
|
+
$token-color-foreground-warning: #bb5a00;
|
|
74
|
+
$token-color-foreground-warning-on-surface: #9e4b00;
|
|
75
|
+
$token-color-foreground-warning-high-contrast: #542800;
|
|
76
|
+
$token-color-foreground-critical: #e52228;
|
|
77
|
+
$token-color-foreground-critical-on-surface: #c00005;
|
|
78
|
+
$token-color-foreground-critical-high-contrast: #51130a;
|
|
79
|
+
$token-color-page-primary: #ffffff;
|
|
80
|
+
$token-color-page-faint: #fafafa;
|
|
81
|
+
$token-color-surface-primary: #ffffff;
|
|
82
|
+
$token-color-surface-faint: #fafafa;
|
|
83
|
+
$token-color-surface-strong: #f1f2f3;
|
|
84
|
+
$token-color-surface-interactive: #ffffff;
|
|
85
|
+
$token-color-surface-interactive-hover: #f1f2f3;
|
|
86
|
+
$token-color-surface-interactive-active: #dedfe3;
|
|
87
|
+
$token-color-surface-interactive-disabled: #fafafa;
|
|
88
|
+
$token-color-surface-action: #f2f8ff;
|
|
89
|
+
$token-color-surface-highlight: #f9f2ff;
|
|
90
|
+
$token-color-surface-success: #f2fbf6;
|
|
91
|
+
$token-color-surface-warning: #fff9e8;
|
|
92
|
+
$token-color-surface-critical: #fff5f5;
|
|
93
|
+
$token-color-hashicorp-brand: #000000;
|
|
94
|
+
$token-color-boundary-brand: #f24c53;
|
|
95
|
+
$token-color-boundary-foreground: #cf2d32;
|
|
96
|
+
$token-color-boundary-surface: #ffecec;
|
|
97
|
+
$token-color-boundary-border: #fbd7d8;
|
|
98
|
+
$token-color-boundary-gradient-primary-start: #f97076;
|
|
99
|
+
$token-color-boundary-gradient-primary-stop: #db363b;
|
|
100
|
+
$token-color-boundary-gradient-faint-start: #fffafa; // this is the 'boundary-50' value at 25% opacity on white
|
|
101
|
+
$token-color-boundary-gradient-faint-stop: #ffecec;
|
|
102
|
+
$token-color-consul-brand: #e03875;
|
|
103
|
+
$token-color-consul-foreground: #d01c5b;
|
|
104
|
+
$token-color-consul-surface: #ffe9f1;
|
|
105
|
+
$token-color-consul-border: #ffcede;
|
|
106
|
+
$token-color-consul-gradient-primary-start: #ff99be;
|
|
107
|
+
$token-color-consul-gradient-primary-stop: #da306e;
|
|
108
|
+
$token-color-consul-gradient-faint-start: #fff9fb; // this is the 'consul-50' value at 25% opacity on white
|
|
109
|
+
$token-color-consul-gradient-faint-stop: #ffe9f1;
|
|
110
|
+
$token-color-hcp-brand: #000000;
|
|
111
|
+
$token-color-nomad-brand: #06d092;
|
|
112
|
+
$token-color-nomad-foreground: #008661;
|
|
113
|
+
$token-color-nomad-surface: #d3fdeb;
|
|
114
|
+
$token-color-nomad-border: #bff3dd;
|
|
115
|
+
$token-color-nomad-gradient-primary-start: #bff3dd;
|
|
116
|
+
$token-color-nomad-gradient-primary-stop: #60dea9;
|
|
117
|
+
$token-color-nomad-gradient-faint-start: #f3fff9; // this is the 'nomad-50' value at 25% opacity on white
|
|
118
|
+
$token-color-nomad-gradient-faint-stop: #d3fdeb;
|
|
119
|
+
$token-color-packer-brand: #02a8ef;
|
|
120
|
+
$token-color-packer-foreground: #007eb4;
|
|
121
|
+
$token-color-packer-surface: #d4f2ff;
|
|
122
|
+
$token-color-packer-border: #b4e4ff;
|
|
123
|
+
$token-color-packer-gradient-primary-start: #b4e4ff;
|
|
124
|
+
$token-color-packer-gradient-primary-stop: #63d0ff;
|
|
125
|
+
$token-color-packer-gradient-faint-start: #f3fcff; // this is the 'packer-50' value at 25% opacity on white
|
|
126
|
+
$token-color-packer-gradient-faint-stop: #d4f2ff;
|
|
127
|
+
$token-color-terraform-brand: #7b42bc;
|
|
128
|
+
$token-color-terraform-brand-on-dark: #a067da; // this is an alternative brand color meant to be used on dark backgrounds
|
|
129
|
+
$token-color-terraform-foreground: #773cb4;
|
|
130
|
+
$token-color-terraform-surface: #f4ecff;
|
|
131
|
+
$token-color-terraform-border: #ebdbfc;
|
|
132
|
+
$token-color-terraform-gradient-primary-start: #bb8deb;
|
|
133
|
+
$token-color-terraform-gradient-primary-stop: #844fba;
|
|
134
|
+
$token-color-terraform-gradient-faint-start: #fcfaff; // this is the 'terraform-50' value at 25% opacity on white
|
|
135
|
+
$token-color-terraform-gradient-faint-stop: #f4ecff;
|
|
136
|
+
$token-color-vagrant-brand: #1868f2;
|
|
137
|
+
$token-color-vagrant-foreground: #1c61d8;
|
|
138
|
+
$token-color-vagrant-surface: #d6ebff;
|
|
139
|
+
$token-color-vagrant-border: #c7dbfc;
|
|
140
|
+
$token-color-vagrant-gradient-primary-start: #c7dbfc;
|
|
141
|
+
$token-color-vagrant-gradient-primary-stop: #7dadff;
|
|
142
|
+
$token-color-vagrant-gradient-faint-start: #f4faff; // this is the 'vagrant-50' value at 25% opacity on white
|
|
143
|
+
$token-color-vagrant-gradient-faint-stop: #d6ebff;
|
|
144
|
+
$token-color-vault-radar-brand: #ffcf25;
|
|
145
|
+
$token-color-vault-radar-brand-alt: #000000; // this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work
|
|
146
|
+
$token-color-vault-radar-foreground: #9a6f00;
|
|
147
|
+
$token-color-vault-radar-surface: #fff9cf;
|
|
148
|
+
$token-color-vault-radar-border: #feec7b;
|
|
149
|
+
$token-color-vault-radar-gradient-primary-start: #feec7b;
|
|
150
|
+
$token-color-vault-radar-gradient-primary-stop: #ffe543;
|
|
151
|
+
$token-color-vault-radar-gradient-faint-start: #fffdf2; // this is the 'vault-radar-50' value at 25% opacity on white
|
|
152
|
+
$token-color-vault-radar-gradient-faint-stop: #fff9cf;
|
|
153
|
+
$token-color-vault-secrets-brand: #ffcf25;
|
|
154
|
+
$token-color-vault-secrets-brand-alt: #000000; // this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work
|
|
155
|
+
$token-color-vault-secrets-foreground: #9a6f00;
|
|
156
|
+
$token-color-vault-secrets-surface: #fff9cf;
|
|
157
|
+
$token-color-vault-secrets-border: #feec7b;
|
|
158
|
+
$token-color-vault-secrets-gradient-primary-start: #feec7b;
|
|
159
|
+
$token-color-vault-secrets-gradient-primary-stop: #ffe543;
|
|
160
|
+
$token-color-vault-secrets-gradient-faint-start: #fffdf2; // this is the 'vault-secrets-50' value at 25% opacity on white
|
|
161
|
+
$token-color-vault-secrets-gradient-faint-stop: #fff9cf;
|
|
162
|
+
$token-color-vault-brand: #ffcf25;
|
|
163
|
+
$token-color-vault-brand-alt: #000000; // this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work
|
|
164
|
+
$token-color-vault-foreground: #9a6f00;
|
|
165
|
+
$token-color-vault-surface: #fff9cf;
|
|
166
|
+
$token-color-vault-border: #feec7b;
|
|
167
|
+
$token-color-vault-gradient-primary-start: #feec7b;
|
|
168
|
+
$token-color-vault-gradient-primary-stop: #ffe543;
|
|
169
|
+
$token-color-vault-gradient-faint-start: #fffdf2; // this is the 'vault-50' value at 25% opacity on white
|
|
170
|
+
$token-color-vault-gradient-faint-stop: #fff9cf;
|
|
171
|
+
$token-color-waypoint-brand: #14c6cb;
|
|
172
|
+
$token-color-waypoint-foreground: #008196;
|
|
173
|
+
$token-color-waypoint-surface: #e0fcff;
|
|
174
|
+
$token-color-waypoint-border: #cbf1f3;
|
|
175
|
+
$token-color-waypoint-gradient-primary-start: #cbf1f3;
|
|
176
|
+
$token-color-waypoint-gradient-primary-stop: #62d4dc;
|
|
177
|
+
$token-color-waypoint-gradient-faint-start: #f6feff; // this is the 'waypoint-50' value at 25% opacity on white
|
|
178
|
+
$token-color-waypoint-gradient-faint-stop: #e0fcff;
|
|
179
|
+
$token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
180
|
+
$token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
181
|
+
$token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
|
|
182
|
+
$token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
183
|
+
$token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
|
|
184
|
+
$token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
|
|
185
|
+
$token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
|
|
186
|
+
$token-surface-base-box-shadow: 0 0 0 1px #656a7633;
|
|
187
|
+
$token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
188
|
+
$token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
|
|
189
|
+
$token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
190
|
+
$token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
191
|
+
$token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
|
|
192
|
+
$token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
|
|
193
|
+
$token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
|
|
194
|
+
$token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
195
|
+
$token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
196
|
+
$token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace;
|
|
197
|
+
$token-typography-font-weight-regular: 400;
|
|
198
|
+
$token-typography-font-weight-medium: 500;
|
|
199
|
+
$token-typography-font-weight-semibold: 600;
|
|
200
|
+
$token-typography-font-weight-bold: 700;
|
|
201
|
+
$token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
202
|
+
$token-typography-display-500-font-size: 30px; // 30px/1.875rem
|
|
203
|
+
$token-typography-display-500-line-height: 1.2666; // 38px
|
|
204
|
+
$token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
205
|
+
$token-typography-display-400-font-size: 24px; // 24px/1.5rem
|
|
206
|
+
$token-typography-display-400-line-height: 1.3333; // 32px
|
|
207
|
+
$token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
208
|
+
$token-typography-display-300-font-size: 18px; // 18px/1.125rem
|
|
209
|
+
$token-typography-display-300-line-height: 1.3333; // 24px
|
|
210
|
+
$token-typography-display-300-letter-spacing: -0.5px; // this is `tracking`
|
|
211
|
+
$token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
212
|
+
$token-typography-display-200-font-size: 16px; // 16px/1rem
|
|
213
|
+
$token-typography-display-200-line-height: 1.5; // 24px
|
|
214
|
+
$token-typography-display-200-letter-spacing: -0.5px; // this is `tracking`
|
|
215
|
+
$token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
216
|
+
$token-typography-display-100-font-size: 13px; // 13px/0.8125rem
|
|
217
|
+
$token-typography-display-100-line-height: 1.3846; // 18px
|
|
218
|
+
$token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
219
|
+
$token-typography-body-300-font-size: 16px; // 16px/1rem
|
|
220
|
+
$token-typography-body-300-line-height: 1.5; // 24px
|
|
221
|
+
$token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
222
|
+
$token-typography-body-200-font-size: 14px; // 14px/0.875rem
|
|
223
|
+
$token-typography-body-200-line-height: 1.4286; // 20px
|
|
224
|
+
$token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
225
|
+
$token-typography-body-100-font-size: 13px; // 13px/0.8125rem
|
|
226
|
+
$token-typography-body-100-line-height: 1.3846; // 18px
|
|
227
|
+
$token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace;
|
|
228
|
+
$token-typography-code-100-font-size: 13px; // 13px/0.8125rem
|
|
229
|
+
$token-typography-code-100-line-height: 1.23; // 16px
|
|
230
|
+
$token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace;
|
|
231
|
+
$token-typography-code-200-font-size: 14px; // 14px/0.875rem
|
|
232
|
+
$token-typography-code-200-line-height: 1.125; // 18px
|
|
233
|
+
$token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace;
|
|
234
|
+
$token-typography-code-300-font-size: 16px; // 16px/1rem
|
|
235
|
+
$token-typography-code-300-line-height: 1.25; // 20px
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 08 Feb 2024 22:22:41 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
|
|
7
|
+
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
|
|
6
8
|
.hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
|
|
7
9
|
.hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
|
|
8
10
|
.hds-elevation-mid { box-shadow: var(--token-elevation-mid-box-shadow); }
|
|
9
|
-
.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
|
|
10
|
-
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
|
|
11
11
|
.hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
|
|
12
12
|
.hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
|
|
13
13
|
.hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 08 Feb 2024 22:22:41 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -180,11 +180,11 @@
|
|
|
180
180
|
--token-color-waypoint-gradient-primary-stop: #62d4dc;
|
|
181
181
|
--token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
|
|
182
182
|
--token-color-waypoint-gradient-faint-stop: #e0fcff;
|
|
183
|
+
--token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
184
|
+
--token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
183
185
|
--token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
|
|
184
186
|
--token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
185
187
|
--token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
|
|
186
|
-
--token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
187
|
-
--token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
188
188
|
--token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
|
|
189
189
|
--token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
|
|
190
190
|
--token-surface-base-box-shadow: 0 0 0 1px #656a7633;
|
|
@@ -195,20 +195,6 @@
|
|
|
195
195
|
--token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
|
|
196
196
|
--token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
|
|
197
197
|
--token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
|
|
198
|
-
--token-form-label-color: #0c0c0e;
|
|
199
|
-
--token-form-legend-color: #0c0c0e;
|
|
200
|
-
--token-form-helper-text-color: #656a76;
|
|
201
|
-
--token-form-indicator-optional-color: #656a76;
|
|
202
|
-
--token-form-error-color: #c00005;
|
|
203
|
-
--token-form-error-icon-size: 14px;
|
|
204
|
-
--token-form-checkbox-size: 16px;
|
|
205
|
-
--token-form-checkbox-border-radius: 3px;
|
|
206
|
-
--token-form-checkbox-border-width: 1px;
|
|
207
|
-
--token-form-checkbox-background-image-size: 12px;
|
|
208
|
-
--token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
209
|
-
--token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
210
|
-
--token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
211
|
-
--token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
212
198
|
--token-form-control-base-foreground-value-color: #0c0c0e;
|
|
213
199
|
--token-form-control-base-foreground-placeholder-color: #656a76;
|
|
214
200
|
--token-form-control-base-surface-color-default: #ffffff;
|
|
@@ -231,6 +217,20 @@
|
|
|
231
217
|
--token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
|
|
232
218
|
--token-form-control-border-radius: 5px;
|
|
233
219
|
--token-form-control-border-width: 1px;
|
|
220
|
+
--token-form-label-color: #0c0c0e;
|
|
221
|
+
--token-form-legend-color: #0c0c0e;
|
|
222
|
+
--token-form-helper-text-color: #656a76;
|
|
223
|
+
--token-form-indicator-optional-color: #656a76;
|
|
224
|
+
--token-form-error-color: #c00005;
|
|
225
|
+
--token-form-error-icon-size: 14px;
|
|
226
|
+
--token-form-checkbox-size: 16px;
|
|
227
|
+
--token-form-checkbox-border-radius: 3px;
|
|
228
|
+
--token-form-checkbox-border-width: 1px;
|
|
229
|
+
--token-form-checkbox-background-image-size: 12px;
|
|
230
|
+
--token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
231
|
+
--token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
232
|
+
--token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
233
|
+
--token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
234
234
|
--token-form-radio-size: 16px;
|
|
235
235
|
--token-form-radio-border-width: 1px;
|
|
236
236
|
--token-form-radio-background-image-size: 12px;
|
|
@@ -298,8 +298,10 @@
|
|
|
298
298
|
--token-side-nav-color-surface-primary: #0c0c0e;
|
|
299
299
|
--token-side-nav-color-surface-interactive-hover: #3b3d45;
|
|
300
300
|
--token-side-nav-color-surface-interactive-active: #656a76;
|
|
301
|
-
--token-tabs-tab-height: 36px;
|
|
302
|
-
--token-tabs-tab-
|
|
301
|
+
--token-tabs-tab-height-medium: 36px;
|
|
302
|
+
--token-tabs-tab-height-large: 48px;
|
|
303
|
+
--token-tabs-tab-padding-horizontal-medium: 12px;
|
|
304
|
+
--token-tabs-tab-padding-horizontal-large: 20px;
|
|
303
305
|
--token-tabs-tab-padding-vertical: 0px;
|
|
304
306
|
--token-tabs-tab-border-radius: 5px;
|
|
305
307
|
--token-tabs-tab-focus-inset: 6px;
|