@dialpad/dialtone 7.21.0 → 7.22.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/lib/build/less/components/avatar.less +1 -1
- package/lib/build/less/components/badge.less +1 -1
- package/lib/build/less/components/chip.less +5 -5
- package/lib/build/less/components/input.less +1 -0
- package/lib/build/less/components/table.less +1 -1
- package/lib/build/less/utilities/colors.less +49 -0
- package/lib/build/less/variables/colors.less +11 -0
- package/lib/build/svg/brand/dialbot.svg +4 -4
- package/lib/dist/css/dialtone.css +337 -6
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/svg/brand/dialbot.svg +1 -1
- package/lib/dist/vue/icons/IconDialbot.vue +1 -1
- package/package.json +3 -4
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
// COMPONENT CSS VARIABLES
|
|
22
22
|
// --------------------------------------------------------------------------
|
|
23
23
|
--badge-color-text: var(--fc-primary);
|
|
24
|
-
--badge-color-background: var(--
|
|
24
|
+
--badge-color-background: var(--bgc-moderate-opaque);
|
|
25
25
|
--badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
|
|
26
26
|
--badge-radius: var(--size-300);
|
|
27
27
|
--badge-line-height: calc(var(--size-500) + var(--size-200));
|
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
// $ BASE STYLE
|
|
16
16
|
// ----------------------------------------------------------------------------
|
|
17
17
|
.d-chip {
|
|
18
|
+
// Component CSS Vars
|
|
19
|
+
--chip-color-text: var(--fc-primary);
|
|
20
|
+
--chip-color-background: var(--bgc-moderate-opaque);
|
|
21
|
+
--chip-border-radius: var(--br-pill);
|
|
22
|
+
|
|
18
23
|
position: relative;
|
|
19
24
|
display: inline-flex;
|
|
20
25
|
align-items: center;
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
.d-chip__label {
|
|
24
|
-
// Component CSS Vars
|
|
25
|
-
--chip-color-text: var(--fc-primary);
|
|
26
|
-
--chip-color-background: var(--black-200);
|
|
27
|
-
--chip-border-radius: var(--br-pill);
|
|
28
|
-
|
|
29
29
|
display: inline-flex;
|
|
30
30
|
align-items: center;
|
|
31
31
|
justify-content: center;
|
|
@@ -96,12 +96,21 @@
|
|
|
96
96
|
.d-bgc-secondary { &:extend(.d-bgc-black-100); }
|
|
97
97
|
#d-internals #generate-hover-focus(d-bgc-secondary, {.d-bgc-secondary();});
|
|
98
98
|
|
|
99
|
+
.d-bgc-secondary-opaque { background-color: var(--bgc-secondary-opaque); }
|
|
100
|
+
#d-internals #generate-hover-focus(d-bgc-secondary-opaque, {.d-bgc-secondary-opaque();});
|
|
101
|
+
|
|
99
102
|
.d-bgc-moderate { &:extend(.d-bgc-black-200); }
|
|
100
103
|
#d-internals #generate-hover-focus(d-bgc-moderate, {.d-bgc-moderate();});
|
|
101
104
|
|
|
105
|
+
.d-bgc-moderate-opaque { background-color: var(--bgc-moderate-opaque); }
|
|
106
|
+
#d-internals #generate-hover-focus(d-bgc-moderate-opaque, {.d-bgc-moderate-opaque();});
|
|
107
|
+
|
|
102
108
|
.d-bgc-bold { &:extend(.d-bgc-black-300); }
|
|
103
109
|
#d-internals #generate-hover-focus(d-bgc-bold, {.d-bgc-bold();});
|
|
104
110
|
|
|
111
|
+
.d-bgc-bold-opaque { background-color: var(--bgc-bold-opaque); }
|
|
112
|
+
#d-internals #generate-hover-focus(d-bgc-bold-opaque, {.d-bgc-bold-opaque();});
|
|
113
|
+
|
|
105
114
|
.d-bgc-strong { &:extend(.d-bgc-black-600); }
|
|
106
115
|
#d-internals #generate-hover-focus(d-bgc-strong, {.d-bgc-strong();});
|
|
107
116
|
|
|
@@ -110,26 +119,66 @@
|
|
|
110
119
|
|
|
111
120
|
.d-bgc-success { &:extend(.d-bgc-green-100); }
|
|
112
121
|
#d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
|
|
122
|
+
|
|
123
|
+
.d-bgc-success-opaque { background-color: var(--bgc-success-opaque) !important; }
|
|
124
|
+
#d-internals #generate-hover-focus(d-bgc-success-opaque, {.d-bgc-success-opaque();});
|
|
125
|
+
|
|
113
126
|
.d-bgc-success-subtle { background-color: var(--bgc-success-subtle) !important; }
|
|
127
|
+
#d-internals #generate-hover-focus(d-bgc-success-subtle, {.d-bgc-success-subtle();});
|
|
128
|
+
|
|
129
|
+
.d-bgc-success-subtle-opaque { background-color: var(--bgc-success-subtle-opaque) !important; }
|
|
130
|
+
#d-internals #generate-hover-focus(d-bgc-success-subtle-opaque, {.d-bgc-success-subtle-opaque();});
|
|
131
|
+
|
|
114
132
|
.d-bgc-success-strong { background-color: var(--bgc-success-strong) !important; }
|
|
133
|
+
#d-internals #generate-hover-focus(d-bgc-success-strong, {.d-bgc-success-strong();});
|
|
115
134
|
|
|
116
135
|
.d-bgc-warning { &:extend(.d-bgc-gold-100); }
|
|
117
136
|
#d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
|
|
137
|
+
|
|
138
|
+
.d-bgc-warning-opaque { background-color: var(--bgc-warning-opaque) !important; }
|
|
139
|
+
#d-internals #generate-hover-focus(d-bgc-warning-opaque, {.d-bgc-warning-opaque();});
|
|
140
|
+
|
|
118
141
|
.d-bgc-warning-subtle { background-color: var(--bgc-warning-subtle) !important; }
|
|
142
|
+
#d-internals #generate-hover-focus(d-bgc-warning-subtle, {.d-bgc-warning-subtle();});
|
|
143
|
+
|
|
144
|
+
.d-bgc-warning-subtle-opaque { background-color: var(--bgc-warning-subtle-opaque) !important; }
|
|
145
|
+
#d-internals #generate-hover-focus(d-bgc-warning-subtle-opaque, {.d-bgc-warning-subtle-opaque();});
|
|
146
|
+
|
|
119
147
|
.d-bgc-warning-strong { background-color: var(--bgc-warning-strong) !important; }
|
|
148
|
+
#d-internals #generate-hover-focus(d-bgc-warning-strong, {.d-bgc-warning-strong();});
|
|
120
149
|
|
|
121
150
|
.d-bgc-info { &:extend(.d-bgc-blue-100); }
|
|
122
151
|
#d-internals #generate-hover-focus(d-bgc-info, {.d-bgc-info();});
|
|
152
|
+
|
|
153
|
+
.d-bgc-info-opaque { background-color: var(--bgc-info-opaque) !important; }
|
|
154
|
+
#d-internals #generate-hover-focus(d-bgc-info-opaque, {.d-bgc-info-opaque();});
|
|
155
|
+
|
|
123
156
|
.d-bgc-info-subtle { background-color: var(--bgc-info-subtle) !important; }
|
|
157
|
+
#d-internals #generate-hover-focus(d-bgc-info-subtle, {.d-bgc-info-subtle();});
|
|
158
|
+
|
|
159
|
+
.d-bgc-info-subtle-opaque { background-color: var(--bgc-info-subtle-opaque) !important; }
|
|
160
|
+
#d-internals #generate-hover-focus(d-bgc-info-subtle-opaque, {.d-bgc-info-subtle-opaque();});
|
|
161
|
+
|
|
124
162
|
.d-bgc-info-strong { background-color: var(--bgc-info-strong) !important; }
|
|
163
|
+
#d-internals #generate-hover-focus(d-bgc-info-strong, {.d-bgc-info-strong();});
|
|
125
164
|
|
|
126
165
|
.d-bgc-critical,
|
|
127
166
|
.d-bgc-error,
|
|
128
167
|
.d-bgc-danger { &:extend(.d-bgc-red-100); }
|
|
129
168
|
#d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
|
|
130
169
|
#d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
|
|
170
|
+
|
|
171
|
+
.d-bgc-critical-opaque { background-color: var(--bgc-critical-opaque) !important; }
|
|
172
|
+
#d-internals #generate-hover-focus(d-bgc-critical-opaque, {.d-bgc-critical-opaque();});
|
|
173
|
+
|
|
131
174
|
.d-bgc-critical-subtle { background-color: var(--bgc-critical-subtle) !important; }
|
|
175
|
+
#d-internals #generate-hover-focus(d-bgc-critical-subtle, {.d-bgc-critical-subtle();});
|
|
176
|
+
|
|
177
|
+
.d-bgc-critical-subtle-opaque { background-color: var(--bgc-critical-subtle-opaque) !important; }
|
|
178
|
+
#d-internals #generate-hover-focus(d-bgc-critical-subtle-opaque, {.d-bgc-critical-subtle-opaque();});
|
|
179
|
+
|
|
132
180
|
.d-bgc-critical-strong { background-color: var(--bgc-critical-strong) !important; }
|
|
181
|
+
#d-internals #generate-hover-focus(d-bgc-critical-strong, {.d-bgc-critical-strong();});
|
|
133
182
|
|
|
134
183
|
.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
|
|
135
184
|
#d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
|
|
@@ -90,22 +90,30 @@
|
|
|
90
90
|
@surface-colors: {
|
|
91
91
|
bgc-critical: var(--red-100);
|
|
92
92
|
bgc-critical-hsl: var(--red-100-hsl);
|
|
93
|
+
bgc-critical-opaque: hsla(var(--red-300-hsl) / 0.11);
|
|
93
94
|
bgc-critical-subtle: #fff2f3;
|
|
95
|
+
bgc-critical-subtle-opaque:hsla(var(--red-300-hsl) / 0.05);
|
|
94
96
|
bgc-critical-strong: var(--red-400);
|
|
95
97
|
|
|
96
98
|
bgc-info: var(--blue-100);
|
|
97
99
|
bgc-info-hsl: var(--blue-100-hsl);
|
|
100
|
+
bgc-info-opaque: hsla(var(--blue-400-hsl) / 0.09);
|
|
98
101
|
bgc-info-subtle: #f5f9fd;
|
|
102
|
+
bgc-info-subtle-opaque: hsla(var(--blue-400-hsl) / 0.04);
|
|
99
103
|
bgc-info-strong: var(--blue-400);
|
|
100
104
|
|
|
101
105
|
bgc-warning: var(--gold-100);
|
|
102
106
|
bgc-warning-hsl: var(--gold-100-hsl);
|
|
107
|
+
bgc-warning-opaque: hsla(var(--gold-200-hsl) / 0.38);
|
|
103
108
|
bgc-warning-subtle: #fffae5;
|
|
109
|
+
bgc-warning-subtle-opaque: hsla(var(--gold-200-hsl) / 0.18);
|
|
104
110
|
bgc-warning-strong: var(--gold-500);
|
|
105
111
|
|
|
106
112
|
bgc-success: var(--green-100);
|
|
107
113
|
bgc-success-hsl: var(--green-100-hsl);
|
|
114
|
+
bgc-success-opaque: hsla(var(--green-400-hsl) / 0.08);
|
|
108
115
|
bgc-success-subtle: #f8fdf7;
|
|
116
|
+
bgc-success-subtle-opaque: hsla(var(--green-400-hsl) / 0.03);
|
|
109
117
|
bgc-success-strong: var(--green-400);
|
|
110
118
|
|
|
111
119
|
bgc-primary: var(--white);
|
|
@@ -113,12 +121,15 @@
|
|
|
113
121
|
|
|
114
122
|
bgc-secondary: var(--black-100);
|
|
115
123
|
bgc-secondary-hsl: var(--black-100-hsl);
|
|
124
|
+
bgc-secondary-opaque: hsla(var(--black-900-hsl) / 0.02);
|
|
116
125
|
|
|
117
126
|
bgc-moderate: var(--black-200);
|
|
118
127
|
bgc-moderate-hsl: var(--black-200-hsl);
|
|
128
|
+
bgc-moderate-opaque: hsla(var(--black-900-hsl) / 0.09);
|
|
119
129
|
|
|
120
130
|
bgc-bold: var(--black-300);
|
|
121
131
|
bgc-bold-hsl: var(--black-300-hsl);
|
|
132
|
+
bgc-bold-opaque: hsla(var(--black-900-hsl) / 0.18);
|
|
122
133
|
|
|
123
134
|
bgc-strong: var(--black-600);
|
|
124
135
|
bgc-strong-hsl: var(--black-600-hsl);
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="179" cy="179" r="179" fill="url(#
|
|
3
|
-
<path d="M179 268.5L179 256.567L179
|
|
4
|
-
<path d="M226.733 202.867C220.206 208.568 212.791 212.977 204.49 216.093C196.188 219.209 187.709 220.767 179.053 220.767C170.326 220.767 161.812 219.209 153.51 216.093C145.209 212.977 137.794 208.568 131.267 202.867L131.267 190.
|
|
2
|
+
<circle cx="179" cy="179" r="179" fill="url(#paint0_linear_4_44)"/>
|
|
3
|
+
<path d="M179 268.5L179 256.567L179 268.5ZM265.517 268.5L265.517 280.433L284.825 280.433L276.19 263.163L265.517 268.5ZM248.787 235.041L239.487 227.563L234.69 233.53L238.114 240.378L248.787 235.041ZM179 101.433C221.839 101.433 256.567 136.161 256.567 179L280.433 179C280.433 122.98 235.02 77.5667 179 77.5667L179 101.433ZM101.433 179C101.433 136.161 136.161 101.433 179 101.433L179 77.5667C122.98 77.5667 77.5667 122.98 77.5667 179L101.433 179ZM179 256.567C136.161 256.567 101.433 221.839 101.433 179L77.5667 179C77.5667 235.02 122.98 280.433 179 280.433L179 256.567ZM265.517 256.567L179 256.567L179 280.433L265.517 280.433L265.517 256.567ZM238.114 240.378L254.843 273.837L276.19 263.163L259.461 229.704L238.114 240.378ZM256.567 179C256.567 197.396 250.177 214.268 239.487 227.563L258.087 242.518C272.062 225.138 280.433 203.03 280.433 179L256.567 179Z" fill="white"/>
|
|
4
|
+
<path d="M226.733 202.867C220.206 208.568 212.791 212.977 204.49 216.093C196.188 219.209 187.709 220.767 179.053 220.767C170.326 220.767 161.812 219.209 153.51 216.093C145.209 212.977 137.794 208.568 131.267 202.867L131.267 190.933C135.666 193.585 140.632 195.872 146.167 197.795C151.63 199.784 157.235 201.342 162.982 202.469C168.73 203.596 174.087 204.159 179.053 204.159C184.091 204.159 189.448 203.596 195.124 202.469C200.871 201.342 206.476 199.784 211.94 197.795C217.474 195.872 222.405 193.585 226.733 190.933L226.733 202.867Z" fill="white"/>
|
|
5
5
|
<defs>
|
|
6
|
-
<linearGradient id="
|
|
6
|
+
<linearGradient id="paint0_linear_4_44" x1="0" y1="0" x2="358" y2="358" gradientUnits="userSpaceOnUse">
|
|
7
7
|
<stop stop-color="#7C52FF"/>
|
|
8
8
|
<stop offset="1" stop-color="#F9008E"/>
|
|
9
9
|
</linearGradient>
|
|
@@ -482,7 +482,7 @@ body {
|
|
|
482
482
|
--avatar-presence-position-bottom: calc(var(--space-200) * -1);
|
|
483
483
|
--avatar-count-color-shadow: var(--theme-sidebar-color-background);
|
|
484
484
|
position: relative;
|
|
485
|
-
display:
|
|
485
|
+
display: flex;
|
|
486
486
|
color: var(--avatar-color-text);
|
|
487
487
|
}
|
|
488
488
|
.d-avatar__canvas {
|
|
@@ -579,7 +579,7 @@ body {
|
|
|
579
579
|
}
|
|
580
580
|
.d-badge {
|
|
581
581
|
--badge-color-text: var(--fc-primary);
|
|
582
|
-
--badge-color-background: var(--
|
|
582
|
+
--badge-color-background: var(--bgc-moderate-opaque);
|
|
583
583
|
--badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
|
|
584
584
|
--badge-radius: var(--size-300);
|
|
585
585
|
--badge-line-height: calc(var(--size-500) + var(--size-200));
|
|
@@ -1295,14 +1295,14 @@ body {
|
|
|
1295
1295
|
padding: 0 var(--size-500) var(--size-500);
|
|
1296
1296
|
}
|
|
1297
1297
|
.d-chip {
|
|
1298
|
+
--chip-color-text: var(--fc-primary);
|
|
1299
|
+
--chip-color-background: var(--bgc-moderate-opaque);
|
|
1300
|
+
--chip-border-radius: var(--br-pill);
|
|
1298
1301
|
position: relative;
|
|
1299
1302
|
display: inline-flex;
|
|
1300
1303
|
align-items: center;
|
|
1301
1304
|
}
|
|
1302
1305
|
.d-chip__label {
|
|
1303
|
-
--chip-color-text: var(--fc-primary);
|
|
1304
|
-
--chip-color-background: var(--black-200);
|
|
1305
|
-
--chip-border-radius: var(--br-pill);
|
|
1306
1306
|
display: inline-flex;
|
|
1307
1307
|
align-items: center;
|
|
1308
1308
|
justify-content: center;
|
|
@@ -1716,6 +1716,7 @@ legend .d-label {
|
|
|
1716
1716
|
transition-duration: var(--td100);
|
|
1717
1717
|
transition-property: box-shadow, background-color;
|
|
1718
1718
|
appearance: none;
|
|
1719
|
+
caret-color: var(--input-color-text);
|
|
1719
1720
|
}
|
|
1720
1721
|
.d-input::placeholder,
|
|
1721
1722
|
.d-input--md::placeholder,
|
|
@@ -2880,6 +2881,7 @@ legend .d-label {
|
|
|
2880
2881
|
transition-duration: var(--td100);
|
|
2881
2882
|
transition-property: box-shadow, background-color;
|
|
2882
2883
|
appearance: none;
|
|
2884
|
+
caret-color: var(--input-color-text);
|
|
2883
2885
|
padding-right: var(--select-notch-padding-right);
|
|
2884
2886
|
}
|
|
2885
2887
|
.d-select__input::placeholder {
|
|
@@ -3093,7 +3095,7 @@ legend .d-label {
|
|
|
3093
3095
|
--table-color-border: var(--bc-inverted-default);
|
|
3094
3096
|
}
|
|
3095
3097
|
.d-table--striped tr:nth-child(even) {
|
|
3096
|
-
background-color:
|
|
3098
|
+
background-color: var(--bgc-secondary-opaque);
|
|
3097
3099
|
}
|
|
3098
3100
|
.d-table--striped.d-table--inverted tr:nth-child(even) {
|
|
3099
3101
|
background-color: hsla(var(--bgc-primary-hsl) / 0.1);
|
|
@@ -13492,30 +13494,348 @@ body.theme-dark .d\:d-bgc-black-700 {
|
|
|
13492
13494
|
.fv\:d-fc-unset:focus-visible {
|
|
13493
13495
|
color: unset !important;
|
|
13494
13496
|
}
|
|
13497
|
+
.d-bgc-secondary-opaque {
|
|
13498
|
+
background-color: var(--bgc-secondary-opaque);
|
|
13499
|
+
}
|
|
13500
|
+
.h\:d-bgc-secondary-opaque:hover {
|
|
13501
|
+
background-color: var(--bgc-secondary-opaque);
|
|
13502
|
+
}
|
|
13503
|
+
.f\:d-bgc-secondary-opaque:focus {
|
|
13504
|
+
background-color: var(--bgc-secondary-opaque);
|
|
13505
|
+
}
|
|
13506
|
+
.f\:d-bgc-secondary-opaque:focus-within {
|
|
13507
|
+
background-color: var(--bgc-secondary-opaque);
|
|
13508
|
+
}
|
|
13509
|
+
.fv\:d-bgc-secondary-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-secondary-opaque.focus-visible {
|
|
13510
|
+
background-color: var(--bgc-secondary-opaque);
|
|
13511
|
+
}
|
|
13512
|
+
.fv\:d-bgc-secondary-opaque:focus-visible {
|
|
13513
|
+
background-color: var(--bgc-secondary-opaque);
|
|
13514
|
+
}
|
|
13515
|
+
.d-bgc-moderate-opaque {
|
|
13516
|
+
background-color: var(--bgc-moderate-opaque);
|
|
13517
|
+
}
|
|
13518
|
+
.h\:d-bgc-moderate-opaque:hover {
|
|
13519
|
+
background-color: var(--bgc-moderate-opaque);
|
|
13520
|
+
}
|
|
13521
|
+
.f\:d-bgc-moderate-opaque:focus {
|
|
13522
|
+
background-color: var(--bgc-moderate-opaque);
|
|
13523
|
+
}
|
|
13524
|
+
.f\:d-bgc-moderate-opaque:focus-within {
|
|
13525
|
+
background-color: var(--bgc-moderate-opaque);
|
|
13526
|
+
}
|
|
13527
|
+
.fv\:d-bgc-moderate-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-moderate-opaque.focus-visible {
|
|
13528
|
+
background-color: var(--bgc-moderate-opaque);
|
|
13529
|
+
}
|
|
13530
|
+
.fv\:d-bgc-moderate-opaque:focus-visible {
|
|
13531
|
+
background-color: var(--bgc-moderate-opaque);
|
|
13532
|
+
}
|
|
13533
|
+
.d-bgc-bold-opaque {
|
|
13534
|
+
background-color: var(--bgc-bold-opaque);
|
|
13535
|
+
}
|
|
13536
|
+
.h\:d-bgc-bold-opaque:hover {
|
|
13537
|
+
background-color: var(--bgc-bold-opaque);
|
|
13538
|
+
}
|
|
13539
|
+
.f\:d-bgc-bold-opaque:focus {
|
|
13540
|
+
background-color: var(--bgc-bold-opaque);
|
|
13541
|
+
}
|
|
13542
|
+
.f\:d-bgc-bold-opaque:focus-within {
|
|
13543
|
+
background-color: var(--bgc-bold-opaque);
|
|
13544
|
+
}
|
|
13545
|
+
.fv\:d-bgc-bold-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-bold-opaque.focus-visible {
|
|
13546
|
+
background-color: var(--bgc-bold-opaque);
|
|
13547
|
+
}
|
|
13548
|
+
.fv\:d-bgc-bold-opaque:focus-visible {
|
|
13549
|
+
background-color: var(--bgc-bold-opaque);
|
|
13550
|
+
}
|
|
13551
|
+
.d-bgc-success-opaque {
|
|
13552
|
+
background-color: var(--bgc-success-opaque) !important;
|
|
13553
|
+
}
|
|
13554
|
+
.h\:d-bgc-success-opaque:hover {
|
|
13555
|
+
background-color: var(--bgc-success-opaque) !important;
|
|
13556
|
+
}
|
|
13557
|
+
.f\:d-bgc-success-opaque:focus {
|
|
13558
|
+
background-color: var(--bgc-success-opaque) !important;
|
|
13559
|
+
}
|
|
13560
|
+
.f\:d-bgc-success-opaque:focus-within {
|
|
13561
|
+
background-color: var(--bgc-success-opaque) !important;
|
|
13562
|
+
}
|
|
13563
|
+
.fv\:d-bgc-success-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-success-opaque.focus-visible {
|
|
13564
|
+
background-color: var(--bgc-success-opaque) !important;
|
|
13565
|
+
}
|
|
13566
|
+
.fv\:d-bgc-success-opaque:focus-visible {
|
|
13567
|
+
background-color: var(--bgc-success-opaque) !important;
|
|
13568
|
+
}
|
|
13495
13569
|
.d-bgc-success-subtle {
|
|
13496
13570
|
background-color: var(--bgc-success-subtle) !important;
|
|
13497
13571
|
}
|
|
13572
|
+
.h\:d-bgc-success-subtle:hover {
|
|
13573
|
+
background-color: var(--bgc-success-subtle) !important;
|
|
13574
|
+
}
|
|
13575
|
+
.f\:d-bgc-success-subtle:focus {
|
|
13576
|
+
background-color: var(--bgc-success-subtle) !important;
|
|
13577
|
+
}
|
|
13578
|
+
.f\:d-bgc-success-subtle:focus-within {
|
|
13579
|
+
background-color: var(--bgc-success-subtle) !important;
|
|
13580
|
+
}
|
|
13581
|
+
.fv\:d-bgc-success-subtle.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-success-subtle.focus-visible {
|
|
13582
|
+
background-color: var(--bgc-success-subtle) !important;
|
|
13583
|
+
}
|
|
13584
|
+
.fv\:d-bgc-success-subtle:focus-visible {
|
|
13585
|
+
background-color: var(--bgc-success-subtle) !important;
|
|
13586
|
+
}
|
|
13587
|
+
.d-bgc-success-subtle-opaque {
|
|
13588
|
+
background-color: var(--bgc-success-subtle-opaque) !important;
|
|
13589
|
+
}
|
|
13590
|
+
.h\:d-bgc-success-subtle-opaque:hover {
|
|
13591
|
+
background-color: var(--bgc-success-subtle-opaque) !important;
|
|
13592
|
+
}
|
|
13593
|
+
.f\:d-bgc-success-subtle-opaque:focus {
|
|
13594
|
+
background-color: var(--bgc-success-subtle-opaque) !important;
|
|
13595
|
+
}
|
|
13596
|
+
.f\:d-bgc-success-subtle-opaque:focus-within {
|
|
13597
|
+
background-color: var(--bgc-success-subtle-opaque) !important;
|
|
13598
|
+
}
|
|
13599
|
+
.fv\:d-bgc-success-subtle-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-success-subtle-opaque.focus-visible {
|
|
13600
|
+
background-color: var(--bgc-success-subtle-opaque) !important;
|
|
13601
|
+
}
|
|
13602
|
+
.fv\:d-bgc-success-subtle-opaque:focus-visible {
|
|
13603
|
+
background-color: var(--bgc-success-subtle-opaque) !important;
|
|
13604
|
+
}
|
|
13498
13605
|
.d-bgc-success-strong {
|
|
13499
13606
|
background-color: var(--bgc-success-strong) !important;
|
|
13500
13607
|
}
|
|
13608
|
+
.h\:d-bgc-success-strong:hover {
|
|
13609
|
+
background-color: var(--bgc-success-strong) !important;
|
|
13610
|
+
}
|
|
13611
|
+
.f\:d-bgc-success-strong:focus {
|
|
13612
|
+
background-color: var(--bgc-success-strong) !important;
|
|
13613
|
+
}
|
|
13614
|
+
.f\:d-bgc-success-strong:focus-within {
|
|
13615
|
+
background-color: var(--bgc-success-strong) !important;
|
|
13616
|
+
}
|
|
13617
|
+
.fv\:d-bgc-success-strong.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-success-strong.focus-visible {
|
|
13618
|
+
background-color: var(--bgc-success-strong) !important;
|
|
13619
|
+
}
|
|
13620
|
+
.fv\:d-bgc-success-strong:focus-visible {
|
|
13621
|
+
background-color: var(--bgc-success-strong) !important;
|
|
13622
|
+
}
|
|
13623
|
+
.d-bgc-warning-opaque {
|
|
13624
|
+
background-color: var(--bgc-warning-opaque) !important;
|
|
13625
|
+
}
|
|
13626
|
+
.h\:d-bgc-warning-opaque:hover {
|
|
13627
|
+
background-color: var(--bgc-warning-opaque) !important;
|
|
13628
|
+
}
|
|
13629
|
+
.f\:d-bgc-warning-opaque:focus {
|
|
13630
|
+
background-color: var(--bgc-warning-opaque) !important;
|
|
13631
|
+
}
|
|
13632
|
+
.f\:d-bgc-warning-opaque:focus-within {
|
|
13633
|
+
background-color: var(--bgc-warning-opaque) !important;
|
|
13634
|
+
}
|
|
13635
|
+
.fv\:d-bgc-warning-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-warning-opaque.focus-visible {
|
|
13636
|
+
background-color: var(--bgc-warning-opaque) !important;
|
|
13637
|
+
}
|
|
13638
|
+
.fv\:d-bgc-warning-opaque:focus-visible {
|
|
13639
|
+
background-color: var(--bgc-warning-opaque) !important;
|
|
13640
|
+
}
|
|
13501
13641
|
.d-bgc-warning-subtle {
|
|
13502
13642
|
background-color: var(--bgc-warning-subtle) !important;
|
|
13503
13643
|
}
|
|
13644
|
+
.h\:d-bgc-warning-subtle:hover {
|
|
13645
|
+
background-color: var(--bgc-warning-subtle) !important;
|
|
13646
|
+
}
|
|
13647
|
+
.f\:d-bgc-warning-subtle:focus {
|
|
13648
|
+
background-color: var(--bgc-warning-subtle) !important;
|
|
13649
|
+
}
|
|
13650
|
+
.f\:d-bgc-warning-subtle:focus-within {
|
|
13651
|
+
background-color: var(--bgc-warning-subtle) !important;
|
|
13652
|
+
}
|
|
13653
|
+
.fv\:d-bgc-warning-subtle.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-warning-subtle.focus-visible {
|
|
13654
|
+
background-color: var(--bgc-warning-subtle) !important;
|
|
13655
|
+
}
|
|
13656
|
+
.fv\:d-bgc-warning-subtle:focus-visible {
|
|
13657
|
+
background-color: var(--bgc-warning-subtle) !important;
|
|
13658
|
+
}
|
|
13659
|
+
.d-bgc-warning-subtle-opaque {
|
|
13660
|
+
background-color: var(--bgc-warning-subtle-opaque) !important;
|
|
13661
|
+
}
|
|
13662
|
+
.h\:d-bgc-warning-subtle-opaque:hover {
|
|
13663
|
+
background-color: var(--bgc-warning-subtle-opaque) !important;
|
|
13664
|
+
}
|
|
13665
|
+
.f\:d-bgc-warning-subtle-opaque:focus {
|
|
13666
|
+
background-color: var(--bgc-warning-subtle-opaque) !important;
|
|
13667
|
+
}
|
|
13668
|
+
.f\:d-bgc-warning-subtle-opaque:focus-within {
|
|
13669
|
+
background-color: var(--bgc-warning-subtle-opaque) !important;
|
|
13670
|
+
}
|
|
13671
|
+
.fv\:d-bgc-warning-subtle-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-warning-subtle-opaque.focus-visible {
|
|
13672
|
+
background-color: var(--bgc-warning-subtle-opaque) !important;
|
|
13673
|
+
}
|
|
13674
|
+
.fv\:d-bgc-warning-subtle-opaque:focus-visible {
|
|
13675
|
+
background-color: var(--bgc-warning-subtle-opaque) !important;
|
|
13676
|
+
}
|
|
13504
13677
|
.d-bgc-warning-strong {
|
|
13505
13678
|
background-color: var(--bgc-warning-strong) !important;
|
|
13506
13679
|
}
|
|
13680
|
+
.h\:d-bgc-warning-strong:hover {
|
|
13681
|
+
background-color: var(--bgc-warning-strong) !important;
|
|
13682
|
+
}
|
|
13683
|
+
.f\:d-bgc-warning-strong:focus {
|
|
13684
|
+
background-color: var(--bgc-warning-strong) !important;
|
|
13685
|
+
}
|
|
13686
|
+
.f\:d-bgc-warning-strong:focus-within {
|
|
13687
|
+
background-color: var(--bgc-warning-strong) !important;
|
|
13688
|
+
}
|
|
13689
|
+
.fv\:d-bgc-warning-strong.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-warning-strong.focus-visible {
|
|
13690
|
+
background-color: var(--bgc-warning-strong) !important;
|
|
13691
|
+
}
|
|
13692
|
+
.fv\:d-bgc-warning-strong:focus-visible {
|
|
13693
|
+
background-color: var(--bgc-warning-strong) !important;
|
|
13694
|
+
}
|
|
13695
|
+
.d-bgc-info-opaque {
|
|
13696
|
+
background-color: var(--bgc-info-opaque) !important;
|
|
13697
|
+
}
|
|
13698
|
+
.h\:d-bgc-info-opaque:hover {
|
|
13699
|
+
background-color: var(--bgc-info-opaque) !important;
|
|
13700
|
+
}
|
|
13701
|
+
.f\:d-bgc-info-opaque:focus {
|
|
13702
|
+
background-color: var(--bgc-info-opaque) !important;
|
|
13703
|
+
}
|
|
13704
|
+
.f\:d-bgc-info-opaque:focus-within {
|
|
13705
|
+
background-color: var(--bgc-info-opaque) !important;
|
|
13706
|
+
}
|
|
13707
|
+
.fv\:d-bgc-info-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-info-opaque.focus-visible {
|
|
13708
|
+
background-color: var(--bgc-info-opaque) !important;
|
|
13709
|
+
}
|
|
13710
|
+
.fv\:d-bgc-info-opaque:focus-visible {
|
|
13711
|
+
background-color: var(--bgc-info-opaque) !important;
|
|
13712
|
+
}
|
|
13507
13713
|
.d-bgc-info-subtle {
|
|
13508
13714
|
background-color: var(--bgc-info-subtle) !important;
|
|
13509
13715
|
}
|
|
13716
|
+
.h\:d-bgc-info-subtle:hover {
|
|
13717
|
+
background-color: var(--bgc-info-subtle) !important;
|
|
13718
|
+
}
|
|
13719
|
+
.f\:d-bgc-info-subtle:focus {
|
|
13720
|
+
background-color: var(--bgc-info-subtle) !important;
|
|
13721
|
+
}
|
|
13722
|
+
.f\:d-bgc-info-subtle:focus-within {
|
|
13723
|
+
background-color: var(--bgc-info-subtle) !important;
|
|
13724
|
+
}
|
|
13725
|
+
.fv\:d-bgc-info-subtle.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-info-subtle.focus-visible {
|
|
13726
|
+
background-color: var(--bgc-info-subtle) !important;
|
|
13727
|
+
}
|
|
13728
|
+
.fv\:d-bgc-info-subtle:focus-visible {
|
|
13729
|
+
background-color: var(--bgc-info-subtle) !important;
|
|
13730
|
+
}
|
|
13731
|
+
.d-bgc-info-subtle-opaque {
|
|
13732
|
+
background-color: var(--bgc-info-subtle-opaque) !important;
|
|
13733
|
+
}
|
|
13734
|
+
.h\:d-bgc-info-subtle-opaque:hover {
|
|
13735
|
+
background-color: var(--bgc-info-subtle-opaque) !important;
|
|
13736
|
+
}
|
|
13737
|
+
.f\:d-bgc-info-subtle-opaque:focus {
|
|
13738
|
+
background-color: var(--bgc-info-subtle-opaque) !important;
|
|
13739
|
+
}
|
|
13740
|
+
.f\:d-bgc-info-subtle-opaque:focus-within {
|
|
13741
|
+
background-color: var(--bgc-info-subtle-opaque) !important;
|
|
13742
|
+
}
|
|
13743
|
+
.fv\:d-bgc-info-subtle-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-info-subtle-opaque.focus-visible {
|
|
13744
|
+
background-color: var(--bgc-info-subtle-opaque) !important;
|
|
13745
|
+
}
|
|
13746
|
+
.fv\:d-bgc-info-subtle-opaque:focus-visible {
|
|
13747
|
+
background-color: var(--bgc-info-subtle-opaque) !important;
|
|
13748
|
+
}
|
|
13510
13749
|
.d-bgc-info-strong {
|
|
13511
13750
|
background-color: var(--bgc-info-strong) !important;
|
|
13512
13751
|
}
|
|
13752
|
+
.h\:d-bgc-info-strong:hover {
|
|
13753
|
+
background-color: var(--bgc-info-strong) !important;
|
|
13754
|
+
}
|
|
13755
|
+
.f\:d-bgc-info-strong:focus {
|
|
13756
|
+
background-color: var(--bgc-info-strong) !important;
|
|
13757
|
+
}
|
|
13758
|
+
.f\:d-bgc-info-strong:focus-within {
|
|
13759
|
+
background-color: var(--bgc-info-strong) !important;
|
|
13760
|
+
}
|
|
13761
|
+
.fv\:d-bgc-info-strong.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-info-strong.focus-visible {
|
|
13762
|
+
background-color: var(--bgc-info-strong) !important;
|
|
13763
|
+
}
|
|
13764
|
+
.fv\:d-bgc-info-strong:focus-visible {
|
|
13765
|
+
background-color: var(--bgc-info-strong) !important;
|
|
13766
|
+
}
|
|
13767
|
+
.d-bgc-critical-opaque {
|
|
13768
|
+
background-color: var(--bgc-critical-opaque) !important;
|
|
13769
|
+
}
|
|
13770
|
+
.h\:d-bgc-critical-opaque:hover {
|
|
13771
|
+
background-color: var(--bgc-critical-opaque) !important;
|
|
13772
|
+
}
|
|
13773
|
+
.f\:d-bgc-critical-opaque:focus {
|
|
13774
|
+
background-color: var(--bgc-critical-opaque) !important;
|
|
13775
|
+
}
|
|
13776
|
+
.f\:d-bgc-critical-opaque:focus-within {
|
|
13777
|
+
background-color: var(--bgc-critical-opaque) !important;
|
|
13778
|
+
}
|
|
13779
|
+
.fv\:d-bgc-critical-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-critical-opaque.focus-visible {
|
|
13780
|
+
background-color: var(--bgc-critical-opaque) !important;
|
|
13781
|
+
}
|
|
13782
|
+
.fv\:d-bgc-critical-opaque:focus-visible {
|
|
13783
|
+
background-color: var(--bgc-critical-opaque) !important;
|
|
13784
|
+
}
|
|
13513
13785
|
.d-bgc-critical-subtle {
|
|
13514
13786
|
background-color: var(--bgc-critical-subtle) !important;
|
|
13515
13787
|
}
|
|
13788
|
+
.h\:d-bgc-critical-subtle:hover {
|
|
13789
|
+
background-color: var(--bgc-critical-subtle) !important;
|
|
13790
|
+
}
|
|
13791
|
+
.f\:d-bgc-critical-subtle:focus {
|
|
13792
|
+
background-color: var(--bgc-critical-subtle) !important;
|
|
13793
|
+
}
|
|
13794
|
+
.f\:d-bgc-critical-subtle:focus-within {
|
|
13795
|
+
background-color: var(--bgc-critical-subtle) !important;
|
|
13796
|
+
}
|
|
13797
|
+
.fv\:d-bgc-critical-subtle.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-critical-subtle.focus-visible {
|
|
13798
|
+
background-color: var(--bgc-critical-subtle) !important;
|
|
13799
|
+
}
|
|
13800
|
+
.fv\:d-bgc-critical-subtle:focus-visible {
|
|
13801
|
+
background-color: var(--bgc-critical-subtle) !important;
|
|
13802
|
+
}
|
|
13803
|
+
.d-bgc-critical-subtle-opaque {
|
|
13804
|
+
background-color: var(--bgc-critical-subtle-opaque) !important;
|
|
13805
|
+
}
|
|
13806
|
+
.h\:d-bgc-critical-subtle-opaque:hover {
|
|
13807
|
+
background-color: var(--bgc-critical-subtle-opaque) !important;
|
|
13808
|
+
}
|
|
13809
|
+
.f\:d-bgc-critical-subtle-opaque:focus {
|
|
13810
|
+
background-color: var(--bgc-critical-subtle-opaque) !important;
|
|
13811
|
+
}
|
|
13812
|
+
.f\:d-bgc-critical-subtle-opaque:focus-within {
|
|
13813
|
+
background-color: var(--bgc-critical-subtle-opaque) !important;
|
|
13814
|
+
}
|
|
13815
|
+
.fv\:d-bgc-critical-subtle-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-critical-subtle-opaque.focus-visible {
|
|
13816
|
+
background-color: var(--bgc-critical-subtle-opaque) !important;
|
|
13817
|
+
}
|
|
13818
|
+
.fv\:d-bgc-critical-subtle-opaque:focus-visible {
|
|
13819
|
+
background-color: var(--bgc-critical-subtle-opaque) !important;
|
|
13820
|
+
}
|
|
13516
13821
|
.d-bgc-critical-strong {
|
|
13517
13822
|
background-color: var(--bgc-critical-strong) !important;
|
|
13518
13823
|
}
|
|
13824
|
+
.h\:d-bgc-critical-strong:hover {
|
|
13825
|
+
background-color: var(--bgc-critical-strong) !important;
|
|
13826
|
+
}
|
|
13827
|
+
.f\:d-bgc-critical-strong:focus {
|
|
13828
|
+
background-color: var(--bgc-critical-strong) !important;
|
|
13829
|
+
}
|
|
13830
|
+
.f\:d-bgc-critical-strong:focus-within {
|
|
13831
|
+
background-color: var(--bgc-critical-strong) !important;
|
|
13832
|
+
}
|
|
13833
|
+
.fv\:d-bgc-critical-strong.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-critical-strong.focus-visible {
|
|
13834
|
+
background-color: var(--bgc-critical-strong) !important;
|
|
13835
|
+
}
|
|
13836
|
+
.fv\:d-bgc-critical-strong:focus-visible {
|
|
13837
|
+
background-color: var(--bgc-critical-strong) !important;
|
|
13838
|
+
}
|
|
13519
13839
|
.d-bgc-transparent {
|
|
13520
13840
|
background-color: transparent !important;
|
|
13521
13841
|
background-image: none !important;
|
|
@@ -21073,28 +21393,39 @@ body {
|
|
|
21073
21393
|
--base-color-background: var(--bgc-primary);
|
|
21074
21394
|
--bgc-critical: var(--red-100);
|
|
21075
21395
|
--bgc-critical-hsl: var(--red-100-hsl);
|
|
21396
|
+
--bgc-critical-opaque: hsla(var(--red-300-hsl) / 0.11);
|
|
21076
21397
|
--bgc-critical-subtle: #fff2f3;
|
|
21398
|
+
--bgc-critical-subtle-opaque: hsla(var(--red-300-hsl) / 0.05);
|
|
21077
21399
|
--bgc-critical-strong: var(--red-400);
|
|
21078
21400
|
--bgc-info: var(--blue-100);
|
|
21079
21401
|
--bgc-info-hsl: var(--blue-100-hsl);
|
|
21402
|
+
--bgc-info-opaque: hsla(var(--blue-400-hsl) / 0.09);
|
|
21080
21403
|
--bgc-info-subtle: #f5f9fd;
|
|
21404
|
+
--bgc-info-subtle-opaque: hsla(var(--blue-400-hsl) / 0.04);
|
|
21081
21405
|
--bgc-info-strong: var(--blue-400);
|
|
21082
21406
|
--bgc-warning: var(--gold-100);
|
|
21083
21407
|
--bgc-warning-hsl: var(--gold-100-hsl);
|
|
21408
|
+
--bgc-warning-opaque: hsla(var(--gold-200-hsl) / 0.38);
|
|
21084
21409
|
--bgc-warning-subtle: #fffae5;
|
|
21410
|
+
--bgc-warning-subtle-opaque: hsla(var(--gold-200-hsl) / 0.18);
|
|
21085
21411
|
--bgc-warning-strong: var(--gold-500);
|
|
21086
21412
|
--bgc-success: var(--green-100);
|
|
21087
21413
|
--bgc-success-hsl: var(--green-100-hsl);
|
|
21414
|
+
--bgc-success-opaque: hsla(var(--green-400-hsl) / 0.08);
|
|
21088
21415
|
--bgc-success-subtle: #f8fdf7;
|
|
21416
|
+
--bgc-success-subtle-opaque: hsla(var(--green-400-hsl) / 0.03);
|
|
21089
21417
|
--bgc-success-strong: var(--green-400);
|
|
21090
21418
|
--bgc-primary: var(--white);
|
|
21091
21419
|
--bgc-primary-hsl: var(--white-hsl);
|
|
21092
21420
|
--bgc-secondary: var(--black-100);
|
|
21093
21421
|
--bgc-secondary-hsl: var(--black-100-hsl);
|
|
21422
|
+
--bgc-secondary-opaque: hsla(var(--black-900-hsl) / 0.02);
|
|
21094
21423
|
--bgc-moderate: var(--black-200);
|
|
21095
21424
|
--bgc-moderate-hsl: var(--black-200-hsl);
|
|
21425
|
+
--bgc-moderate-opaque: hsla(var(--black-900-hsl) / 0.09);
|
|
21096
21426
|
--bgc-bold: var(--black-300);
|
|
21097
21427
|
--bgc-bold-hsl: var(--black-300-hsl);
|
|
21428
|
+
--bgc-bold-opaque: hsla(var(--black-900-hsl) / 0.18);
|
|
21098
21429
|
--bgc-strong: var(--black-600);
|
|
21099
21430
|
--bgc-strong-hsl: var(--black-600-hsl);
|
|
21100
21431
|
--bgc-contrast: var(--black-800);
|