@dialpad/dialtone 7.18.1 → 7.20.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.
Files changed (18) hide show
  1. package/lib/build/less/components/banner.less +7 -7
  2. package/lib/build/less/components/input.less +6 -6
  3. package/lib/build/less/components/link.less +2 -2
  4. package/lib/build/less/components/modal.less +1 -1
  5. package/lib/build/less/components/notice.less +5 -5
  6. package/lib/build/less/components/popover.less +5 -2
  7. package/lib/build/less/components/presence.less +4 -1
  8. package/lib/build/less/components/selects.less +3 -3
  9. package/lib/build/less/components/table.less +3 -3
  10. package/lib/build/less/components/tabs.less +6 -2
  11. package/lib/build/less/components/toast.less +4 -4
  12. package/lib/build/less/themes/default.less +15 -7
  13. package/lib/build/less/utilities/borders.less +30 -7
  14. package/lib/build/less/utilities/colors.less +17 -0
  15. package/lib/build/less/variables/colors.less +46 -1
  16. package/lib/dist/css/dialtone.css +241 -59
  17. package/lib/dist/css/dialtone.min.css +1 -1
  18. package/package.json +4 -4
package/lib/build/less/components/banner.less CHANGED
@@ -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: hsla(var(--black-900-hsl) / 0.1);
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-contrast);
95
- --banner-color-text: var(--black-100);
96
- --notice-color-icon: var(--black-100);
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(--red-400);
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(--blue-400);
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(--green-400);
128
+ --banner-color-background: var(--bgc-success-strong);
129
129
  --banner-color-text: var(--fc-primary-inverted);
130
130
  }
131
131
  }
package/lib/build/less/components/input.less CHANGED
@@ -29,7 +29,7 @@
29
29
  .d-input__wrapper {
30
30
  // Component CSS Vars
31
31
  // ------------------------------------------------------------------------
32
- --input-color-border: hsla(var(--black-900-hsl) / 0.09);
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(--color-focus-ring) !important;
77
+ --input-color-border: var(--bc-focus) !important;
78
78
 
79
- box-shadow: 0 0 0 var(--size-100) var(--color-focus-ring) inset;
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(--gold-400) !important;
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(--red-300) !important;
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(--green-400) !important;
224
+ --input-color-border: var(--bc-success) !important;
225
225
  }
226
226
 
227
227
  // ============================================================================
package/lib/build/less/components/link.less CHANGED
@@ -73,14 +73,14 @@
73
73
  // ----------------------------------------------------------------------------
74
74
  &--danger {
75
75
  --link-color-default: var(--fc-critical);
76
- --link-color-default-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
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(--green-500);
83
+ --link-color-default-hover: var(--fc-success-strong);
84
84
  }
85
85
 
86
86
  // $$ MUTED
package/lib/build/less/components/modal.less CHANGED
@@ -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: hsla(var(--black-900-hsl) / 0.1);
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);
package/lib/build/less/components/notice.less CHANGED
@@ -101,8 +101,8 @@
101
101
  // $$ DEFAULT IMPORTANT
102
102
  // ----------------------------------------------------------------------------
103
103
  .d-notice.d-notice--important {
104
- --notice-color-background: var(--bgc-contrast);
105
- --notice-color-text: var(--black-100);
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(--red-400);
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(--blue-400);
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(--green-400);
153
+ --notice-color-background: var(--bgc-success-strong);
154
154
  --notice-color-text: var(--fc-primary-inverted);
155
155
  }
156
156
  }
package/lib/build/less/components/popover.less CHANGED
@@ -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: hsla(var(--black-900-hsl) / 0.1);
30
+ --popover-color-border: var(--bc-subtle);
31
31
  --popover-shadow: var(--bs-card);
32
32
 
33
33
  &,
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  display: grid;
41
- grid-template-rows: 1fr;
41
+ grid-template-rows: min-content 1fr min-content;
42
42
  overflow: auto;
43
43
  background-color: var(--popover-color-background);
44
44
  background-clip: padding-box;
@@ -55,6 +55,7 @@
55
55
  // $$ DIALOG CONTENT
56
56
  // ----------------------------------------------------------------------------
57
57
  &__content {
58
+ grid-row: 2;
58
59
  overflow: auto;
59
60
  }
60
61
 
@@ -76,10 +77,12 @@
76
77
  }
77
78
 
78
79
  &__header {
80
+ grid-row: 1;
79
81
  border-bottom: var(--popover-border-width) solid var(--popover-color-border);
80
82
  }
81
83
 
82
84
  &__footer {
85
+ grid-row: 3;
83
86
  border-top: var(--popover-border-width) solid var(--popover-color-border);
84
87
  }
85
88
  }
package/lib/build/less/components/presence.less CHANGED
@@ -25,7 +25,10 @@
25
25
  border-width: var(--presence-size);
26
26
  border-radius: var(--br-circle);
27
27
 
28
- .dt-leftbar-row--selected &,
28
+ .dt-leftbar-row--selected & {
29
+ --presence-color-border-base: var(--theme-sidebar-selected-row-color-background);
30
+ }
31
+
29
32
  .dt-leftbar-row__primary:hover & {
30
33
  --presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
31
34
  }
package/lib/build/less/components/selects.less CHANGED
@@ -131,15 +131,15 @@
131
131
  // $$ VALIDATION STATES
132
132
  // ------------------------------------------------------------------------
133
133
  .d-select__input--success {
134
- --input-color-border: var(--green-400);
134
+ --input-color-border: var(--bc-success);
135
135
  }
136
136
 
137
137
  .d-select__input--error {
138
- --input-color-border: var(--red-300);
138
+ --input-color-border: var(--bc-critical);
139
139
  }
140
140
 
141
141
  .d-select__input--warning {
142
- --input-color-border: var(--gold-400);
142
+ --input-color-border: var(--bc-warning);
143
143
  }
144
144
 
145
145
  .d-select--disabled {
package/lib/build/less/components/table.less CHANGED
@@ -17,7 +17,7 @@
17
17
  .d-table {
18
18
  // Component CSS Vars
19
19
  // ------------------------------------------------------------------------
20
- --table-color-border: var(--black-300);
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(--black-400);
102
- --table-color-border: var(--black-500);
101
+ --table-td-color-text: var(--fc-tertiary-inverted);
102
+ --table-color-border: var(--bc-inverted-default);
103
103
  }
104
104
 
105
105
  // ============================================================================
package/lib/build/less/components/tabs.less CHANGED
@@ -33,7 +33,7 @@
33
33
  left: 0;
34
34
  z-index: var(--zi-base1);
35
35
  height: var(--size-100);
36
- background-color: var(--black-400);
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(--purple-400);
167
+ --tab-color-background: var(--bc-brand);
168
168
 
169
169
  .d-tablist--no-border & {
170
170
  background-color: var(--tab-color-background);
@@ -183,6 +183,10 @@
183
183
  background-color: hsla(var(--purple-600-hsl) / 0.5);
184
184
  }
185
185
 
186
+ &:not(.d-tablist--no-border)::after {
187
+ background-color: hsla(var(--white-hsl) / 0.34);
188
+ }
189
+
186
190
  .d-tab {
187
191
  --tab-color-text: var(--fc-secondary-inverted);
188
192
 
package/lib/build/less/components/toast.less CHANGED
@@ -91,8 +91,8 @@
91
91
  // $$ DEFAULT IMPORTANT
92
92
  // ----------------------------------------------------------------------------
93
93
  .d-toast.d-toast--important {
94
- --toast-color-background: var(--bgc-contrast);
95
- --toast-color-text: var(--black-100);
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(--blue-400);
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(--green-400);
127
+ --toast-color-background: var(--bgc-success-strong);
128
128
  --toast-color-text: var(--fc-primary-inverted);
129
129
  }
130
130
  }
package/lib/build/less/themes/default.less CHANGED
@@ -63,11 +63,12 @@
63
63
  theme-sidebar-icon-color: var(--fc-secondary);
64
64
  theme-sidebar-status-color: var(--fc-tertiary);
65
65
 
66
- // theme-sidebar-row-color-background: {UNUSED}
67
- theme-sidebar-row-color-background-hover: var(--black-300);
68
- theme-sidebar-active-row-color: var(--fc-primary);
69
- theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
70
- theme-sidebar-active-row-color-background: var(--black-200);
66
+ theme-sidebar-row-color-background: transparent;
67
+ theme-sidebar-row-color-background-hover: hsla(var(--black-900-hsl) / 0.1);
68
+ theme-sidebar-row-color-background-active: var(--black-300);
69
+ theme-sidebar-selected-row-color: var(--fc-primary);
70
+ theme-sidebar-selected-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
71
+ theme-sidebar-selected-row-color-background: var(--black-200);
71
72
 
72
73
  theme-presence-color-background-available: var(--green-400);
73
74
  theme-presence-color-background-busy-unavailable: var(--red-300);
@@ -96,8 +97,9 @@
96
97
  .d-theme-sidebar-icon-fc { color: var(--theme-sidebar-icon-color) !important; }
97
98
  .d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
98
99
  .d-theme-sidebar-row-bgc:hover { background-color: var(--theme-sidebar-row-color-background-hover) !important; }
99
- .d-theme-sidebar-row-active-fc { color: var(--theme-sidebar-active-row-color) !important; }
100
- .d-theme-sidebar-row-active-bgc { background-color: var(--theme-sidebar-active-row-color-background) !important; }
100
+ .d-theme-sidebar-row-bgc:active { background-color: var(--theme-sidebar-row-color-background-active) !important; }
101
+ .d-theme-sidebar-row-selected-fc { color: var(--theme-sidebar-selected-row-color) !important; }
102
+ .d-theme-sidebar-row-selected-bgc { background-color: var(--theme-sidebar-selected-row-color-background) !important; }
101
103
  .d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
102
104
  .d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
103
105
  .d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
@@ -273,6 +275,12 @@ body {
273
275
  --@{key}: @value;
274
276
  });
275
277
 
278
+ // $$ BORDER COLORS
279
+ // ------------------------------------------------------------------------
280
+ each(@border-colors, {
281
+ --@{key}: @value;
282
+ });
283
+
276
284
  // $$ Z-INDEX
277
285
  // ------------------------------------------------------------------------
278
286
  each(@zi-vars, {
package/lib/build/less/utilities/borders.less CHANGED
@@ -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
package/lib/build/less/utilities/colors.less CHANGED
@@ -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();});
package/lib/build/less/variables/colors.less CHANGED
@@ -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(--color-focus-ring);
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);