@dialpad/dialtone 7.19.0 → 7.21.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/lib/build/less/components/badge.less +33 -0
- package/lib/build/less/components/banner.less +7 -7
- package/lib/build/less/components/input.less +6 -6
- package/lib/build/less/components/link.less +2 -2
- package/lib/build/less/components/modal.less +1 -1
- package/lib/build/less/components/notice.less +5 -5
- package/lib/build/less/components/popover.less +1 -1
- package/lib/build/less/components/selects.less +3 -3
- package/lib/build/less/components/table.less +3 -3
- package/lib/build/less/components/tabs.less +2 -2
- package/lib/build/less/components/toast.less +4 -4
- package/lib/build/less/themes/default.less +6 -0
- package/lib/build/less/utilities/borders.less +30 -7
- package/lib/build/less/utilities/colors.less +17 -0
- package/lib/build/less/variables/colors.less +46 -1
- package/lib/build/svg/brand/dialbot.svg +11 -0
- package/lib/dist/css/dialtone.css +293 -49
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/svg/brand/dialbot.svg +1 -0
- package/lib/dist/vue/icons/IconDialbot.vue +3 -0
- package/package.json +1 -1
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
--badge-padding-y: var(--space-100);
|
|
33
33
|
--badge-padding-x: var(--space-400);
|
|
34
34
|
--badge-text-case: none;
|
|
35
|
+
--badge-decorative-color: var(--black-900);
|
|
35
36
|
|
|
36
37
|
// BASE STYLE
|
|
37
38
|
// --------------------------------------------------------------------------
|
|
@@ -93,11 +94,43 @@
|
|
|
93
94
|
background-image: var(--badge-color-background-ai);
|
|
94
95
|
}
|
|
95
96
|
|
|
97
|
+
&--decorate-black-400 { --badge-decorative-color: var(--black-400); }
|
|
98
|
+
&--decorate-black-500 { --badge-decorative-color: var(--black-500); }
|
|
99
|
+
&--decorate-black-900 { --badge-decorative-color: var(--black-900); }
|
|
100
|
+
&--decorate-red-200 { --badge-decorative-color: var(--red-200); }
|
|
101
|
+
&--decorate-red-300 { --badge-decorative-color: var(--red-300); }
|
|
102
|
+
&--decorate-red-400 { --badge-decorative-color: var(--red-400); }
|
|
103
|
+
&--decorate-purple-200 { --badge-decorative-color: var(--purple-200); }
|
|
104
|
+
&--decorate-purple-300 { --badge-decorative-color: var(--purple-300); }
|
|
105
|
+
&--decorate-purple-400 { --badge-decorative-color: var(--purple-400); }
|
|
106
|
+
&--decorate-purple-500 { --badge-decorative-color: var(--purple-500); }
|
|
107
|
+
&--decorate-blue-200 { --badge-decorative-color: var(--blue-200); }
|
|
108
|
+
&--decorate-blue-300 { --badge-decorative-color: var(--blue-300); }
|
|
109
|
+
&--decorate-blue-400 { --badge-decorative-color: var(--blue-400); }
|
|
110
|
+
&--decorate-green-300 { --badge-decorative-color: var(--green-300); }
|
|
111
|
+
&--decorate-green-400 { --badge-decorative-color: var(--green-400); }
|
|
112
|
+
&--decorate-green-500 { --badge-decorative-color: var(--green-500); }
|
|
113
|
+
&--decorate-gold-300 { --badge-decorative-color: var(--gold-300); }
|
|
114
|
+
&--decorate-gold-400 { --badge-decorative-color: var(--gold-400); }
|
|
115
|
+
&--decorate-gold-500 { --badge-decorative-color: var(--gold-500); }
|
|
116
|
+
&--decorate-magenta-200 { --badge-decorative-color: var(--magenta-200); }
|
|
117
|
+
&--decorate-magenta-300 { --badge-decorative-color: var(--magenta-300); }
|
|
118
|
+
&--decorate-magenta-400 { --badge-decorative-color: var(--magenta-400); }
|
|
119
|
+
|
|
96
120
|
// SLOTS
|
|
97
121
|
// --------------------------------------------------------------------------
|
|
98
122
|
|
|
123
|
+
&__decorative {
|
|
124
|
+
display: inline-flex;
|
|
125
|
+
width: var(--size-400);
|
|
126
|
+
height: var(--size-400);
|
|
127
|
+
background-color: var(--badge-decorative-color);
|
|
128
|
+
border-radius: var(--size-200);
|
|
129
|
+
}
|
|
130
|
+
|
|
99
131
|
&__label {
|
|
100
132
|
display: flex;
|
|
133
|
+
align-items: center;
|
|
101
134
|
}
|
|
102
135
|
|
|
103
136
|
&__icon-left,
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
--banner-color-background: var(--bgc-secondary);
|
|
19
19
|
--banner-color-text: var(--fc-primary);
|
|
20
20
|
--notice-color-icon: var(--toast-color-text);
|
|
21
|
-
--banner-color-border:
|
|
21
|
+
--banner-color-border: var(--bc-subtle);
|
|
22
22
|
--banner-font-size: var(--fs-200);
|
|
23
23
|
--banner-line-height: var(--lh-200);
|
|
24
24
|
--banner-dialog-padding-y: var(--space-400);
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
// $$ DEFAULT IMPORTANT
|
|
92
92
|
// ----------------------------------------------------------------------------
|
|
93
93
|
.d-banner.d-banner--important {
|
|
94
|
-
--banner-color-background: var(--bgc-
|
|
95
|
-
--banner-color-text: var(--
|
|
96
|
-
--notice-color-icon: var(--
|
|
94
|
+
--banner-color-background: var(--bgc-strong);
|
|
95
|
+
--banner-color-text: var(--fc-primary-inverted);
|
|
96
|
+
--notice-color-icon: var(--fc-primary-inverted);
|
|
97
97
|
--banner-color-border: transparent;
|
|
98
98
|
}
|
|
99
99
|
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
--banner-color-background: var(--bgc-critical);
|
|
104
104
|
|
|
105
105
|
&.d-banner--important {
|
|
106
|
-
--banner-color-background: var(--
|
|
106
|
+
--banner-color-background: var(--bgc-critical-strong);
|
|
107
107
|
--banner-color-text: var(--fc-primary-inverted);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
--banner-color-background: var(--bgc-info);
|
|
115
115
|
|
|
116
116
|
&.d-banner--important {
|
|
117
|
-
--banner-color-background: var(--
|
|
117
|
+
--banner-color-background: var(--bgc-info-strong);
|
|
118
118
|
--banner-color-text: var(--fc-primary-inverted);
|
|
119
119
|
}
|
|
120
120
|
}
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
--banner-color-background: var(--bgc-success);
|
|
126
126
|
|
|
127
127
|
&.d-banner--important {
|
|
128
|
-
--banner-color-background: var(--
|
|
128
|
+
--banner-color-background: var(--bgc-success-strong);
|
|
129
129
|
--banner-color-text: var(--fc-primary-inverted);
|
|
130
130
|
}
|
|
131
131
|
}
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
.d-input__wrapper {
|
|
30
30
|
// Component CSS Vars
|
|
31
31
|
// ------------------------------------------------------------------------
|
|
32
|
-
--input-color-border:
|
|
32
|
+
--input-color-border: var(--bc-subtle);
|
|
33
33
|
--input-color-background: hsla(var(--black-900-hsl) / 0.03);
|
|
34
34
|
--input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
|
|
35
35
|
--input-color-text: var(--fc-secondary);
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
&:focus,
|
|
75
75
|
&:focus-within {
|
|
76
76
|
--input-color-background: hsla(var(--black-900-hsl) / 0.01);
|
|
77
|
-
--input-color-border: var(--
|
|
77
|
+
--input-color-border: var(--bc-focus) !important;
|
|
78
78
|
|
|
79
|
-
box-shadow: 0 0 0 var(--size-100) var(--color-
|
|
79
|
+
box-shadow: 0 0 0 var(--size-100) var(--input-color-border) inset;
|
|
80
80
|
}
|
|
81
81
|
// -- DISABLED / READ-ONLY
|
|
82
82
|
&[disabled],
|
|
@@ -211,17 +211,17 @@
|
|
|
211
211
|
// ----------------------------------------------------------------------------
|
|
212
212
|
.d-input--warning,
|
|
213
213
|
.d-textarea--warning {
|
|
214
|
-
--input-color-border: var(--
|
|
214
|
+
--input-color-border: var(--bc-warning) !important;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
217
|
.d-input--error,
|
|
218
218
|
.d-textarea--error {
|
|
219
|
-
--input-color-border: var(--
|
|
219
|
+
--input-color-border: var(--bc-critical) !important;
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
.d-input--success,
|
|
223
223
|
.d-textarea--success {
|
|
224
|
-
--input-color-border: var(--
|
|
224
|
+
--input-color-border: var(--bc-success) !important;
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
// ============================================================================
|
|
@@ -73,14 +73,14 @@
|
|
|
73
73
|
// ----------------------------------------------------------------------------
|
|
74
74
|
&--danger {
|
|
75
75
|
--link-color-default: var(--fc-critical);
|
|
76
|
-
--link-color-default-hover:
|
|
76
|
+
--link-color-default-hover: var(--fc-critical-strong);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
// $$ SUCCESS
|
|
80
80
|
// ----------------------------------------------------------------------------
|
|
81
81
|
&--success {
|
|
82
82
|
--link-color-default: var(--fc-success);
|
|
83
|
-
--link-color-default-hover: var(--
|
|
83
|
+
--link-color-default-hover: var(--fc-success-strong);
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
// $$ MUTED
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
--modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
|
|
31
31
|
--modal-dialog-padding: var(--space-600);
|
|
32
32
|
--modal-dialog-color-background: var(--bgc-primary);
|
|
33
|
-
--modal-dialog-color-border:
|
|
33
|
+
--modal-dialog-color-border: var(--bc-subtle);
|
|
34
34
|
--modal-dialog-color-text: var(--fc-tertiary);
|
|
35
35
|
--modal-header-color-text: var(--fc-secondary);
|
|
36
36
|
--modal-dialog-shadow: var(--bs-card);
|
|
@@ -101,8 +101,8 @@
|
|
|
101
101
|
// $$ DEFAULT IMPORTANT
|
|
102
102
|
// ----------------------------------------------------------------------------
|
|
103
103
|
.d-notice.d-notice--important {
|
|
104
|
-
--notice-color-background: var(--bgc-
|
|
105
|
-
--notice-color-text: var(--
|
|
104
|
+
--notice-color-background: var(--bgc-strong);
|
|
105
|
+
--notice-color-text: var(--fc-primary-inverted);
|
|
106
106
|
--notice-color-shadow: transparent;
|
|
107
107
|
--notice-color-icon: var(--fc-primary-inverted);
|
|
108
108
|
}
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
&.d-notice--important,
|
|
119
119
|
&.d-banner--important,
|
|
120
120
|
&.d-toast--important {
|
|
121
|
-
--notice-color-background: var(--
|
|
121
|
+
--notice-color-background: var(--bgc-critical-strong);
|
|
122
122
|
--notice-color-text: var(--fc-primary-inverted);
|
|
123
123
|
}
|
|
124
124
|
}
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
&.d-notice--important,
|
|
135
135
|
&.d-banner--important,
|
|
136
136
|
&.d-toast--important {
|
|
137
|
-
--notice-color-background: var(--
|
|
137
|
+
--notice-color-background: var(--bgc-info-strong);
|
|
138
138
|
--notice-color-text: var(--fc-primary-inverted);
|
|
139
139
|
}
|
|
140
140
|
}
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
&.d-notice--important,
|
|
151
151
|
&.d-banner--important,
|
|
152
152
|
&.d-toast--important {
|
|
153
|
-
--notice-color-background: var(--
|
|
153
|
+
--notice-color-background: var(--bgc-success-strong);
|
|
154
154
|
--notice-color-text: var(--fc-primary-inverted);
|
|
155
155
|
}
|
|
156
156
|
}
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
--popover-color-background: var(--bgc-secondary);
|
|
28
28
|
--popover-border-width: var(--size-100); // 8
|
|
29
29
|
--popover-border-radius: var(--size-400);
|
|
30
|
-
--popover-color-border:
|
|
30
|
+
--popover-color-border: var(--bc-subtle);
|
|
31
31
|
--popover-shadow: var(--bs-card);
|
|
32
32
|
|
|
33
33
|
&,
|
|
@@ -131,15 +131,15 @@
|
|
|
131
131
|
// $$ VALIDATION STATES
|
|
132
132
|
// ------------------------------------------------------------------------
|
|
133
133
|
.d-select__input--success {
|
|
134
|
-
--input-color-border: var(--
|
|
134
|
+
--input-color-border: var(--bc-success);
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
.d-select__input--error {
|
|
138
|
-
--input-color-border: var(--
|
|
138
|
+
--input-color-border: var(--bc-critical);
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.d-select__input--warning {
|
|
142
|
-
--input-color-border: var(--
|
|
142
|
+
--input-color-border: var(--bc-warning);
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
.d-select--disabled {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
.d-table {
|
|
18
18
|
// Component CSS Vars
|
|
19
19
|
// ------------------------------------------------------------------------
|
|
20
|
-
--table-color-border:
|
|
20
|
+
--table-color-border: var(--bc-default);
|
|
21
21
|
--table-th-color-text: var(--fc-secondary);
|
|
22
22
|
--table-td-color-text: var(--fc-tertiary);
|
|
23
23
|
--table-font-size: var(--fs-200);
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
// ----------------------------------------------------------------------------
|
|
99
99
|
.d-table--inverted {
|
|
100
100
|
--table-th-color-text: var(--fc-secondary-inverted);
|
|
101
|
-
--table-td-color-text: var(--
|
|
102
|
-
--table-color-border:
|
|
101
|
+
--table-td-color-text: var(--fc-tertiary-inverted);
|
|
102
|
+
--table-color-border: var(--bc-inverted-default);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
// ============================================================================
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
left: 0;
|
|
34
34
|
z-index: var(--zi-base1);
|
|
35
35
|
height: var(--size-100);
|
|
36
|
-
background-color:
|
|
36
|
+
background-color: var(--bc-moderate);
|
|
37
37
|
content: '';
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
|
|
165
165
|
&::after,
|
|
166
166
|
&:hover::after {
|
|
167
|
-
--tab-color-background: var(--
|
|
167
|
+
--tab-color-background: var(--bc-brand);
|
|
168
168
|
|
|
169
169
|
.d-tablist--no-border & {
|
|
170
170
|
background-color: var(--tab-color-background);
|
|
@@ -91,8 +91,8 @@
|
|
|
91
91
|
// $$ DEFAULT IMPORTANT
|
|
92
92
|
// ----------------------------------------------------------------------------
|
|
93
93
|
.d-toast.d-toast--important {
|
|
94
|
-
--toast-color-background: var(--bgc-
|
|
95
|
-
--toast-color-text: var(--
|
|
94
|
+
--toast-color-background: var(--bgc-strong);
|
|
95
|
+
--toast-color-text: var(--fc-primary-inverted);
|
|
96
96
|
--notice-color-icon: var(--toast-color-text);
|
|
97
97
|
}
|
|
98
98
|
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
--toast-color-background: var(--bgc-info);
|
|
114
114
|
|
|
115
115
|
&.d-toast--important {
|
|
116
|
-
--toast-color-background: var(--
|
|
116
|
+
--toast-color-background: var(--bgc-info-strong);
|
|
117
117
|
--toast-color-text: var(--fc-primary-inverted);
|
|
118
118
|
}
|
|
119
119
|
}
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
--toast-color-background: var(--bgc-success);
|
|
125
125
|
|
|
126
126
|
&.d-toast--important {
|
|
127
|
-
--toast-color-background: var(--
|
|
127
|
+
--toast-color-background: var(--bgc-success-strong);
|
|
128
128
|
--toast-color-text: var(--fc-primary-inverted);
|
|
129
129
|
}
|
|
130
130
|
}
|
|
@@ -275,6 +275,12 @@ body {
|
|
|
275
275
|
--@{key}: @value;
|
|
276
276
|
});
|
|
277
277
|
|
|
278
|
+
// $$ BORDER COLORS
|
|
279
|
+
// ------------------------------------------------------------------------
|
|
280
|
+
each(@border-colors, {
|
|
281
|
+
--@{key}: @value;
|
|
282
|
+
});
|
|
283
|
+
|
|
278
284
|
// $$ Z-INDEX
|
|
279
285
|
// ------------------------------------------------------------------------
|
|
280
286
|
each(@zi-vars, {
|
|
@@ -23,13 +23,6 @@
|
|
|
23
23
|
// ============================================================================
|
|
24
24
|
// $ BORDERS
|
|
25
25
|
// ============================================================================
|
|
26
|
-
// $$ COLOR
|
|
27
|
-
// ----------------------------------------------------------------------------
|
|
28
|
-
.d-bc-transparent { border-color: transparent !important; }
|
|
29
|
-
.d-bc-current { border-color: currentColor !important; }
|
|
30
|
-
.d-bc-unset { border-color: unset !important; }
|
|
31
|
-
|
|
32
|
-
|
|
33
26
|
// $$ DIRECTION
|
|
34
27
|
// ----------------------------------------------------------------------------
|
|
35
28
|
.d-ba { border: var(--size-100) solid !important; }
|
|
@@ -42,6 +35,36 @@
|
|
|
42
35
|
.d-ba-none { border: none !important; }
|
|
43
36
|
.d-ba-unset { border: unset !important; }
|
|
44
37
|
|
|
38
|
+
// ============================================================================
|
|
39
|
+
// $$ COLOR
|
|
40
|
+
// ----------------------------------------------------------------------------
|
|
41
|
+
.d-bc-transparent { border-color: transparent !important; }
|
|
42
|
+
.d-bc-current { border-color: currentColor !important; }
|
|
43
|
+
.d-bc-unset { border-color: unset !important; }
|
|
44
|
+
|
|
45
|
+
.d-bc-subtle { border-color: var(--bc-subtle) !important; }
|
|
46
|
+
.d-bc-default { border-color: var(--bc-default) !important; }
|
|
47
|
+
.d-bc-moderate { border-color: var(--bc-moderate) !important; }
|
|
48
|
+
.d-bc-bold { border-color: var(--bc-bold) !important; }
|
|
49
|
+
|
|
50
|
+
.d-bc-inverted-subtle { border-color: var(--bc-inverted-subtle) !important; }
|
|
51
|
+
.d-bc-inverted-default { border-color: var(--bc-inverted-default) !important; }
|
|
52
|
+
.d-bc-inverted-moderate { border-color: var(--bc-inverted-moderate) !important; }
|
|
53
|
+
.d-bc-inverted-bold { border-color: var(--bc-inverted-bold) !important; }
|
|
54
|
+
|
|
55
|
+
.d-bc-focus { border-color: var(--bc-focus) !important; }
|
|
56
|
+
.d-bc-critical { border-color: var(--bc-critical) !important; }
|
|
57
|
+
.d-bc-critical-subtle { border-color: var(--bc-critical-subtle) !important; }
|
|
58
|
+
.d-bc-critical-strong { border-color: var(--bc-critical-strong) !important; }
|
|
59
|
+
.d-bc-success { border-color: var(--bc-success) !important; }
|
|
60
|
+
.d-bc-success-subtle { border-color: var(--bc-success-subtle) !important; }
|
|
61
|
+
.d-bc-success-strong { border-color: var(--bc-success-strong) !important; }
|
|
62
|
+
.d-bc-warning { border-color: var(--bc-warning) !important; }
|
|
63
|
+
.d-bc-warning-subtle { border-color: var(--bc-warning-subtle) !important; }
|
|
64
|
+
.d-bc-warning-strong { border-color: var(--bc-warning-strong) !important; }
|
|
65
|
+
.d-bc-brand { border-color: var(--bc-brand) !important; }
|
|
66
|
+
.d-bc-brand-subtle { border-color: var(--bc-brand-subtle) !important; }
|
|
67
|
+
.d-bc-brand-strong { border-color: var(--bc-brand-strong) !important; }
|
|
45
68
|
|
|
46
69
|
// ============================================================================
|
|
47
70
|
// $ BORDER RADIUS
|
|
@@ -60,15 +60,24 @@
|
|
|
60
60
|
.d-fc-success { &:extend(.d-fc-green-400); }
|
|
61
61
|
#d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
|
|
62
62
|
|
|
63
|
+
.d-fc-success-strong { &:extend(.d-fc-green-500); }
|
|
64
|
+
#d-internals #generate-hover-focus(d-fc-success-strong, {.d-fc-success-strong();});
|
|
65
|
+
|
|
63
66
|
.d-fc-warning { &:extend(.d-fc-gold-500); }
|
|
64
67
|
#d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
|
|
65
68
|
|
|
66
69
|
.d-fc-error { &:extend(.d-fc-red-300); }
|
|
67
70
|
#d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
|
|
68
71
|
|
|
72
|
+
.d-fc-error-strong { &:extend(.d-fc-red-400); }
|
|
73
|
+
#d-internals #generate-hover-focus(d-fc-error-strong, {.d-fc-error-strong();});
|
|
74
|
+
|
|
69
75
|
.d-fc-critical { &:extend(.d-fc-red-300); }
|
|
70
76
|
#d-internals #generate-hover-focus(d-fc-critical, {.d-fc-critical();});
|
|
71
77
|
|
|
78
|
+
.d-fc-critical-strong { &:extend(.d-fc-red-400); }
|
|
79
|
+
#d-internals #generate-hover-focus(d-fc-critical-strong, {.d-fc-critical-strong();});
|
|
80
|
+
|
|
72
81
|
.d-fc-current { color: currentColor !important; }
|
|
73
82
|
#d-internals #generate-hover-focus(d-fc-current, {.d-fc-current();});
|
|
74
83
|
|
|
@@ -101,18 +110,26 @@
|
|
|
101
110
|
|
|
102
111
|
.d-bgc-success { &:extend(.d-bgc-green-100); }
|
|
103
112
|
#d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
|
|
113
|
+
.d-bgc-success-subtle { background-color: var(--bgc-success-subtle) !important; }
|
|
114
|
+
.d-bgc-success-strong { background-color: var(--bgc-success-strong) !important; }
|
|
104
115
|
|
|
105
116
|
.d-bgc-warning { &:extend(.d-bgc-gold-100); }
|
|
106
117
|
#d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
|
|
118
|
+
.d-bgc-warning-subtle { background-color: var(--bgc-warning-subtle) !important; }
|
|
119
|
+
.d-bgc-warning-strong { background-color: var(--bgc-warning-strong) !important; }
|
|
107
120
|
|
|
108
121
|
.d-bgc-info { &:extend(.d-bgc-blue-100); }
|
|
109
122
|
#d-internals #generate-hover-focus(d-bgc-info, {.d-bgc-info();});
|
|
123
|
+
.d-bgc-info-subtle { background-color: var(--bgc-info-subtle) !important; }
|
|
124
|
+
.d-bgc-info-strong { background-color: var(--bgc-info-strong) !important; }
|
|
110
125
|
|
|
111
126
|
.d-bgc-critical,
|
|
112
127
|
.d-bgc-error,
|
|
113
128
|
.d-bgc-danger { &:extend(.d-bgc-red-100); }
|
|
114
129
|
#d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
|
|
115
130
|
#d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
|
|
131
|
+
.d-bgc-critical-subtle { background-color: var(--bgc-critical-subtle) !important; }
|
|
132
|
+
.d-bgc-critical-strong { background-color: var(--bgc-critical-strong) !important; }
|
|
116
133
|
|
|
117
134
|
.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
|
|
118
135
|
#d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
// ----------------------------------------------------------------------------
|
|
81
81
|
@focus-rings: {
|
|
82
82
|
color-focus-ring: hsla(var(--blue-300-hsl) / 1); // redundant for backwards compatibility
|
|
83
|
-
focus-ring: var(--
|
|
83
|
+
focus-ring: var(--bc-focus);
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
// ============================================================================
|
|
@@ -90,15 +90,23 @@
|
|
|
90
90
|
@surface-colors: {
|
|
91
91
|
bgc-critical: var(--red-100);
|
|
92
92
|
bgc-critical-hsl: var(--red-100-hsl);
|
|
93
|
+
bgc-critical-subtle: #fff2f3;
|
|
94
|
+
bgc-critical-strong: var(--red-400);
|
|
93
95
|
|
|
94
96
|
bgc-info: var(--blue-100);
|
|
95
97
|
bgc-info-hsl: var(--blue-100-hsl);
|
|
98
|
+
bgc-info-subtle: #f5f9fd;
|
|
99
|
+
bgc-info-strong: var(--blue-400);
|
|
96
100
|
|
|
97
101
|
bgc-warning: var(--gold-100);
|
|
98
102
|
bgc-warning-hsl: var(--gold-100-hsl);
|
|
103
|
+
bgc-warning-subtle: #fffae5;
|
|
104
|
+
bgc-warning-strong: var(--gold-500);
|
|
99
105
|
|
|
100
106
|
bgc-success: var(--green-100);
|
|
101
107
|
bgc-success-hsl: var(--green-100-hsl);
|
|
108
|
+
bgc-success-subtle: #f8fdf7;
|
|
109
|
+
bgc-success-strong: var(--green-400);
|
|
102
110
|
|
|
103
111
|
bgc-primary: var(--white);
|
|
104
112
|
bgc-primary-hsl: var(--white-hsl);
|
|
@@ -119,6 +127,34 @@
|
|
|
119
127
|
bgc-contrast-hsl: var(--black-800-hsl);
|
|
120
128
|
}
|
|
121
129
|
|
|
130
|
+
// ============================================================================
|
|
131
|
+
// $ BORDER COLORS
|
|
132
|
+
// Semantic border colors
|
|
133
|
+
// ----------------------------------------------------------------------------
|
|
134
|
+
@border-colors: {
|
|
135
|
+
bc-subtle: rgba(0, 0, 0, 0.1);
|
|
136
|
+
bc-default: rgba(0, 0, 0, 0.18);
|
|
137
|
+
bc-moderate: rgba(0, 0, 0, 0.34);
|
|
138
|
+
bc-bold: rgba(0, 0, 0, 0.5);
|
|
139
|
+
bc-inverted-subtle: rgba(255, 255, 255, 0.14);
|
|
140
|
+
bc-inverted-default: rgba(255, 255, 255, 0.22);
|
|
141
|
+
bc-inverted-moderate: rgba(255, 255, 255, 0.38);
|
|
142
|
+
bc-inverted-bold: rgba(255, 255, 255, 0.5);
|
|
143
|
+
bc-focus: var(--blue-300);
|
|
144
|
+
bc-critical: var(--red-300);
|
|
145
|
+
bc-critical-subtle: var(--red-200);
|
|
146
|
+
bc-critical-strong: var(--red-400);
|
|
147
|
+
bc-success: var(--green-400);
|
|
148
|
+
bc-success-subtle: var(--green-200);
|
|
149
|
+
bc-success-strong: var(--green-500);
|
|
150
|
+
bc-warning: var(--gold-400);
|
|
151
|
+
bc-warning-subtle: var(--gold-200);
|
|
152
|
+
bc-warning-strong: var(--gold-500);
|
|
153
|
+
bc-brand: var(--purple-400);
|
|
154
|
+
bc-brand-subtle: var(--purple-200);
|
|
155
|
+
bc-brand-strong: var(--purple-500);
|
|
156
|
+
}
|
|
157
|
+
|
|
122
158
|
// ============================================================================
|
|
123
159
|
// $ TYPE COLORS
|
|
124
160
|
// Various type color names
|
|
@@ -137,6 +173,9 @@
|
|
|
137
173
|
fc-secondary-inverted: var(--black-200);
|
|
138
174
|
fc-secondary-inverted-hsl: var(--black-200-hsl);
|
|
139
175
|
|
|
176
|
+
fc-tertiary-inverted: var(--black-300);
|
|
177
|
+
fc-tertiary-inverted-hsl: var(--black-300-hsl);
|
|
178
|
+
|
|
140
179
|
fc-tertiary: var(--black-600);
|
|
141
180
|
fc-tertiary-hsl: var(--black-600-hsl);
|
|
142
181
|
|
|
@@ -149,13 +188,19 @@
|
|
|
149
188
|
fc-disabled-hsl: var(--black-500-hsl);
|
|
150
189
|
|
|
151
190
|
fc-critical: var(--red-300);
|
|
191
|
+
fc-critical-strong: var(--red-400);
|
|
152
192
|
fc-critical-hsl: var(--red-300-hsl);
|
|
193
|
+
fc-critical-strong-hsl: var(--red-400-hsl);
|
|
153
194
|
|
|
154
195
|
fc-error: var(--fc-critical);
|
|
196
|
+
fc-error-strong: var(--fc-critical-strong);
|
|
155
197
|
fc-error-hsl: var(--fc-critical-hsl);
|
|
198
|
+
fc-error-strong-hsl: var(--fc-critical-strong-hsl);
|
|
156
199
|
|
|
157
200
|
fc-success: var(--green-400);
|
|
201
|
+
fc-success-strong: var(--green-500);
|
|
158
202
|
fc-success-hsl: var(--green-400-hsl);
|
|
203
|
+
fc-success-strong-hsl: var(--green-500-hsl);
|
|
159
204
|
|
|
160
205
|
fc-warning: var(--gold-500);
|
|
161
206
|
fc-warning-hsl: var(--gold-500-hsl);
|
|
@@ -0,0 +1,11 @@
|
|
|
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(#paint0_linear_1957_89480)"/>
|
|
3
|
+
<path d="M179 268.5L179 256.567L179 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.934C135.666 193.585 140.632 195.873 146.167 197.795C151.63 199.784 157.235 201.342 162.983 202.469C168.73 203.596 174.087 204.16 179.053 204.16C184.091 204.16 189.448 203.596 195.124 202.469C200.871 201.342 206.476 199.784 211.94 197.795C217.474 195.873 222.405 193.585 226.733 190.934L226.733 202.867Z" fill="white"/>
|
|
5
|
+
<defs>
|
|
6
|
+
<linearGradient id="paint0_linear_1957_89480" x1="0" y1="0" x2="358" y2="358" gradientUnits="userSpaceOnUse">
|
|
7
|
+
<stop stop-color="#7C52FF"/>
|
|
8
|
+
<stop offset="1" stop-color="#F9008E"/>
|
|
9
|
+
</linearGradient>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|