lightning-base-components 1.21.9-alpha → 1.22.2-alpha
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/metadata/raptor.json +9 -0
- package/package.json +3 -5
- package/scopedImports/@salesforce-internal-core.appVersion.js +1 -1
- package/src/lightning/accordionSection/button.slds.css +18 -10
- package/src/lightning/baseCombobox/dropdown.slds.css +7 -7
- package/src/lightning/baseCombobox/input-text.slds.css +7 -6
- package/src/lightning/baseComboboxFormattedText/baseComboboxFormattedText.js-meta.xml +1 -1
- package/src/lightning/button/button.slds.css +18 -10
- package/src/lightning/buttonIcon/button-icon.slds.css +23 -15
- package/src/lightning/buttonIcon/buttonIcon.js +29 -26
- package/src/lightning/buttonIconStateful/button-icon.slds.css +23 -15
- package/src/lightning/buttonIconStateful/button.slds.css +18 -10
- package/src/lightning/buttonMenu/button-icon.slds.css +23 -15
- package/src/lightning/buttonMenu/button.slds.css +18 -10
- package/src/lightning/buttonMenu/dropdown.slds.css +7 -7
- package/src/lightning/buttonStateful/button-stateful.slds.css +23 -0
- package/src/lightning/buttonStateful/button.slds.css +18 -10
- package/src/lightning/buttonStateful/buttonStateful.js-meta.xml +3 -0
- package/src/lightning/calendar/calendar.lbc.native.css +1 -0
- package/src/lightning/calendar/calendar.slds.css +13 -10
- package/src/lightning/calendar/dropdown.slds.css +7 -7
- package/src/lightning/calendar/keyboard.js +11 -3
- package/src/lightning/colorPickerCustom/input-text.slds.css +7 -6
- package/src/lightning/colorPickerPanel/colorPickerPanel.js +1 -11
- package/src/lightning/combobox/combobox.html +1 -1
- package/src/lightning/combobox/combobox.js +5 -13
- package/src/lightning/combobox/form-element.slds.css +1 -1
- package/src/lightning/datatable/__examples__/withVirtualization/withVirtualization.js +0 -1
- package/src/lightning/datatable/autoWidthStrategy.js +32 -44
- package/src/lightning/datatable/columns.js +4 -1
- package/src/lightning/datatable/datatable.js +15 -34
- package/src/lightning/datatable/keyboard.js +13 -12
- package/src/lightning/datatable/renderManager.js +1 -3
- package/src/lightning/datatable/rows.js +17 -9
- package/src/lightning/datatable/state.js +0 -1
- package/src/lightning/datatable/virtualization.js +11 -14
- package/src/lightning/datepicker/form-element.slds.css +1 -1
- package/src/lightning/datepicker/input-text.slds.css +7 -6
- package/src/lightning/datetimepicker/form-element.slds.css +1 -1
- package/src/lightning/datetimepicker/input-text.slds.css +7 -6
- package/src/lightning/dualListbox/form-element.slds.css +1 -1
- package/src/lightning/formattedAddress/formattedAddress.js +3 -2
- package/src/lightning/formattedDateTime/formattedDateTime.js +3 -2
- package/src/lightning/formattedDateTime/formattedDateTime.js-meta.xml +1 -1
- package/src/lightning/formattedLocation/formattedLocation.js +3 -2
- package/src/lightning/formattedPhone/formattedPhone.js +3 -2
- package/src/lightning/formattedTime/formattedTime.js +3 -2
- package/src/lightning/formattedUrl/formattedUrl.js +3 -2
- package/src/lightning/groupedCombobox/form-element.slds.css +1 -1
- package/src/lightning/groupedCombobox/groupedCombobox.js +21 -28
- package/src/lightning/groupedCombobox/input-text.slds.css +7 -6
- package/src/lightning/helptext/button-icon.slds.css +23 -15
- package/src/lightning/helptext/form-element.slds.css +1 -1
- package/src/lightning/helptext/helptext.html +2 -1
- package/src/lightning/helptext/helptext.js +0 -12
- package/src/lightning/helptext/helptext.js-meta.xml +3 -0
- package/src/lightning/input/form-element.slds.css +1 -1
- package/src/lightning/inputAddress/__docs__/inputAddress.md +44 -3
- package/src/lightning/inputAddress/form-element.slds.css +1 -1
- package/src/lightning/inputAddress/input-text.slds.css +7 -6
- package/src/lightning/inputAddress/inputAddress.js +8 -6
- package/src/lightning/inputLocation/form-element.slds.css +1 -1
- package/src/lightning/inputLocation/input-text.slds.css +7 -6
- package/src/lightning/inputName/form-element.slds.css +1 -1
- package/src/lightning/inputName/input-text.slds.css +7 -6
- package/src/lightning/inputName/inputName.js-meta.xml +3 -0
- package/src/lightning/interactiveDialogBase/button.slds.css +515 -0
- package/src/lightning/interactiveDialogBase/interactive-dialog-base.slds.css +45 -17
- package/src/lightning/interactiveDialogBase/interactiveDialogBase.lbc.native.css +6 -1
- package/src/lightning/interactiveDialogBase/modal-base.slds.css +242 -0
- package/src/lightning/interactiveDialogBase/modal-body.slds.css +60 -0
- package/src/lightning/interactiveDialogBase/modal-footer.slds.css +79 -0
- package/src/lightning/interactiveDialogBase/modal-header.slds.css +76 -0
- package/src/lightning/lookupAddress/form-element.slds.css +1 -1
- package/src/lightning/lookupAddress/lookupAddress.js-meta.xml +3 -0
- package/src/lightning/menuDivider/menuDivider.js-meta.xml +3 -0
- package/src/lightning/menuSubheader/menuSubheader.js-meta.xml +3 -0
- package/src/lightning/modal/modal.js-meta.xml +3 -0
- package/src/lightning/modalBase/modalBase.js +7 -5
- package/src/lightning/modalBody/modalBody.js-meta.xml +3 -0
- package/src/lightning/modalFooter/modalFooter.js-meta.xml +3 -0
- package/src/lightning/modalHeader/modalHeader.js-meta.xml +3 -0
- package/src/lightning/picklist/picklist.js +3 -2
- package/src/lightning/pill/pill.js +1 -1
- package/src/lightning/pillContainer/button.slds.css +18 -10
- package/src/lightning/primitiveBubble/primitiveBubble.js +9 -4
- package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css +1 -1
- package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.html +1 -1
- package/src/lightning/primitiveFileDroppableZone/primitiveFileDroppableZone.js +3 -2
- package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html +1 -0
- package/src/lightning/primitiveInputCheckbox/form-element.slds.css +1 -1
- package/src/lightning/primitiveInputCheckboxButton/form-element.slds.css +1 -1
- package/src/lightning/primitiveInputColor/form-element.slds.css +1 -1
- package/src/lightning/primitiveInputColor/input-text.slds.css +7 -6
- package/src/lightning/primitiveInputFile/button.slds.css +18 -10
- package/src/lightning/primitiveInputFile/form-element.slds.css +1 -1
- package/src/lightning/primitiveInputFile/input-file.slds.css +3 -2
- package/src/lightning/primitiveInputSimple/form-element.slds.css +1 -1
- package/src/lightning/primitiveInputSimple/input-text.slds.css +7 -6
- package/src/lightning/primitiveInputToggle/form-element.slds.css +1 -1
- package/src/lightning/primitiveInputToggle/input-toggle.slds.css +13 -7
- package/src/lightning/progressBar/progressBar.js-meta.xml +3 -0
- package/src/lightning/progressRing/progressRing.js-meta.xml +3 -0
- package/src/lightning/prompt/form-element.slds.css +319 -0
- package/src/lightning/prompt/input-text.slds.css +507 -0
- package/src/lightning/prompt/prompt.lbc.native.css +2 -0
- package/src/lightning/purifyLib/purify.js +838 -586
- package/src/lightning/radioGroup/form-element.slds.css +1 -1
- package/src/lightning/radioGroup/radioGroup.js-meta.xml +3 -0
- package/src/lightning/select/form-element.slds.css +1 -1
- package/src/lightning/select/select.slds.css +1 -1
- package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.css +6 -4
- package/src/lightning/tabBar/tab-bar.slds.css +17 -3
- package/src/lightning/textarea/form-element.slds.css +1 -1
- package/src/lightning/textarea/textarea.js-meta.xml +3 -0
- package/src/lightning/timepicker/form-element.slds.css +1 -1
- package/src/lightning/toast/button-icon.slds.css +23 -15
- package/src/lightning/toast/toast.js-meta.xml +3 -0
- package/src/lightning/toastContainer/toastContainer.js-meta.xml +3 -0
- package/src/lightning/tooltipLibrary/tooltipLibrary.js +15 -4
- package/src/lightning/utilsPrivate/utilsPrivate.js +4 -4
- package/src/lightning/verticalNavigationOverflow/button.slds.css +18 -10
package/metadata/raptor.json
CHANGED
|
@@ -276,6 +276,9 @@
|
|
|
276
276
|
{
|
|
277
277
|
"name": "alternativeText"
|
|
278
278
|
},
|
|
279
|
+
{
|
|
280
|
+
"name": "disableAlternativeTextTitle"
|
|
281
|
+
},
|
|
279
282
|
{
|
|
280
283
|
"name": "iconClass"
|
|
281
284
|
},
|
|
@@ -291,6 +294,9 @@
|
|
|
291
294
|
{
|
|
292
295
|
"name": "tooltip"
|
|
293
296
|
},
|
|
297
|
+
{
|
|
298
|
+
"name": "tooltipType"
|
|
299
|
+
},
|
|
294
300
|
{
|
|
295
301
|
"name": "type"
|
|
296
302
|
},
|
|
@@ -1723,6 +1729,7 @@
|
|
|
1723
1729
|
"industriesCibApi": {},
|
|
1724
1730
|
"industriesClmApi": {},
|
|
1725
1731
|
"industriesContextApi": {},
|
|
1732
|
+
"industriesContextRulesApi": {},
|
|
1726
1733
|
"industriesCpqApi": {},
|
|
1727
1734
|
"industriesCriteriaBasedSearchFilterApi": {},
|
|
1728
1735
|
"industriesDataloadingApi": {},
|
|
@@ -1774,6 +1781,7 @@
|
|
|
1774
1781
|
"industriesSchedulerApi": {},
|
|
1775
1782
|
"industriesServiceExcellenceApi": {},
|
|
1776
1783
|
"industriesServiceprocessApi": {},
|
|
1784
|
+
"industriesStagemanagementApi": {},
|
|
1777
1785
|
"industriesSustainabilityBeiApi": {},
|
|
1778
1786
|
"industriesSustainabilityCsvAttachApi": {},
|
|
1779
1787
|
"industriesSustainabilityDgfApi": {},
|
|
@@ -4552,6 +4560,7 @@
|
|
|
4552
4560
|
"salesEnablementMeasureApi": {},
|
|
4553
4561
|
"salesEnablementProgramApi": {},
|
|
4554
4562
|
"salesEngagementWorkspaceApi": {},
|
|
4563
|
+
"salesEvfsdkApi": {},
|
|
4555
4564
|
"salesPathAssistantApi": {},
|
|
4556
4565
|
"salesPeopleApi": {},
|
|
4557
4566
|
"salesUserWorkingHoursApi": {},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lightning-base-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.22.2-alpha",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"external",
|
|
@@ -1476,8 +1476,6 @@
|
|
|
1476
1476
|
"lightning-accordion-section",
|
|
1477
1477
|
"lightning-avatar",
|
|
1478
1478
|
"lightning-badge",
|
|
1479
|
-
"lightning-avatar",
|
|
1480
|
-
"lightning-badge",
|
|
1481
1479
|
"lightning-base-combobox",
|
|
1482
1480
|
"lightning-base-combobox-formatted-text",
|
|
1483
1481
|
"lightning-base-combobox-item",
|
|
@@ -1528,11 +1526,11 @@
|
|
|
1528
1526
|
"lightning-progress-ring",
|
|
1529
1527
|
"lightning-primitive-bubble",
|
|
1530
1528
|
"lightning-primitive-button",
|
|
1529
|
+
"lightning-primitive-colorpicker-button",
|
|
1531
1530
|
"primitive-file-droppable-zone",
|
|
1532
1531
|
"lightning-primitive-input-checkbox",
|
|
1533
1532
|
"lightning-primitive-input-checkbox-button",
|
|
1534
1533
|
"lightning-primitive-input-color",
|
|
1535
|
-
"lightning-primitive-colorpicker-button",
|
|
1536
1534
|
"lightning-primitive-input-file",
|
|
1537
1535
|
"lightning-primitive-input-simple",
|
|
1538
1536
|
"lightning-primitive-input-toggle",
|
|
@@ -1544,7 +1542,7 @@
|
|
|
1544
1542
|
"lightning-spinner",
|
|
1545
1543
|
"lightning-tab",
|
|
1546
1544
|
"lightning-tab-bar",
|
|
1547
|
-
"lightning-
|
|
1545
|
+
"lightning-tabset",
|
|
1548
1546
|
"lightning-textarea",
|
|
1549
1547
|
"lightning-timepicker",
|
|
1550
1548
|
"lightning-vertical-navigation",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '
|
|
1
|
+
export default '250';
|
|
@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
280
280
|
|
|
281
281
|
/* Text color */
|
|
282
282
|
--sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
|
|
283
|
-
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
|
|
283
|
+
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
|
|
284
284
|
--sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
|
|
285
285
|
--sds-c-button-text-color-active: var(
|
|
286
286
|
--slds-c-button-neutral-text-color-active,
|
|
@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
296
296
|
--sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
|
|
297
297
|
--sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
|
|
298
298
|
--sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
|
|
299
|
+
|
|
300
|
+
/**
|
|
301
|
+
* Needed to override
|
|
302
|
+
* `pointer-event: none` coming from sds
|
|
303
|
+
* that prevent tooltip from showing
|
|
304
|
+
*/
|
|
305
|
+
pointer-events: auto;
|
|
306
|
+
cursor: default;
|
|
299
307
|
}
|
|
300
308
|
/**
|
|
301
309
|
* A note about fallbacks on the default variant:
|
|
@@ -315,36 +323,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
315
323
|
:host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
|
|
316
324
|
--slds-c-button-neutral-color-background: var(
|
|
317
325
|
--slds-c-button-brand-color-background,
|
|
318
|
-
var(--slds-g-color-accent-container-
|
|
326
|
+
var(--slds-g-color-accent-container-1)
|
|
319
327
|
);
|
|
320
328
|
--slds-c-button-neutral-color-background-hover: var(
|
|
321
329
|
--slds-c-button-brand-color-background-hover,
|
|
322
|
-
var(--slds-g-color-accent-container-
|
|
330
|
+
var(--slds-g-color-accent-container-2)
|
|
323
331
|
);
|
|
324
332
|
--slds-c-button-neutral-color-background-focus: var(
|
|
325
333
|
--slds-c-button-brand-color-background-focus,
|
|
326
|
-
var(--slds-g-color-accent-container-
|
|
334
|
+
var(--slds-g-color-accent-container-2)
|
|
327
335
|
);
|
|
328
336
|
--slds-c-button-neutral-color-background-active: var(
|
|
329
337
|
--slds-c-button-brand-color-background-active,
|
|
330
|
-
var(--slds-g-color-accent-container-
|
|
338
|
+
var(--slds-g-color-accent-container-2)
|
|
331
339
|
);
|
|
332
340
|
|
|
333
341
|
--slds-c-button-neutral-color-border: var(
|
|
334
342
|
--slds-c-button-brand-color-border,
|
|
335
|
-
var(--slds-g-color-border-accent-
|
|
343
|
+
var(--slds-g-color-border-accent-1)
|
|
336
344
|
);
|
|
337
345
|
--slds-c-button-neutral-color-border-hover: var(
|
|
338
346
|
--slds-c-button-brand-color-border-hover,
|
|
339
|
-
var(--slds-g-color-border-accent-
|
|
347
|
+
var(--slds-g-color-border-accent-2)
|
|
340
348
|
);
|
|
341
349
|
--slds-c-button-neutral-color-border-focus: var(
|
|
342
350
|
--slds-c-button-brand-color-border-focus,
|
|
343
|
-
var(--slds-g-color-border-accent-
|
|
351
|
+
var(--slds-g-color-border-accent-2)
|
|
344
352
|
);
|
|
345
353
|
--slds-c-button-neutral-color-border-active: var(
|
|
346
354
|
--slds-c-button-brand-color-border-active,
|
|
347
|
-
var(--slds-g-color-border-accent-
|
|
355
|
+
var(--slds-g-color-border-accent-2)
|
|
348
356
|
);
|
|
349
357
|
|
|
350
358
|
/* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
|
|
@@ -396,7 +404,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
396
404
|
--slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
|
|
397
405
|
--slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
|
|
398
406
|
--slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
|
|
399
|
-
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-
|
|
407
|
+
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
|
|
400
408
|
--slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
|
|
401
409
|
--slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
|
|
402
410
|
--slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
|
|
@@ -353,8 +353,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
353
353
|
/* stylelint-disable */
|
|
354
354
|
max-width: var(--_dropdown-size-medium);
|
|
355
355
|
/* stylelint-enable */
|
|
356
|
-
margin-block-start: calc(var(--slds-g-spacing-1)
|
|
357
|
-
margin-block-end: calc(var(--slds-g-spacing-1)
|
|
356
|
+
margin-block-start: calc(var(--slds-g-spacing-1) / 2);
|
|
357
|
+
margin-block-end: calc(var(--slds-g-spacing-1) / 2);
|
|
358
358
|
font-size: var(--slds-g-font-scale-neg-1);
|
|
359
359
|
border-style: solid;
|
|
360
360
|
transform: translateX(-50%);
|
|
@@ -393,11 +393,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
393
393
|
/* Deal with positioning when target is just an icon */
|
|
394
394
|
:host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],:host([data-render-mode="shadow"])
|
|
395
395
|
.slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
|
|
396
|
-
left: (var(--slds-g-spacing-2) * -1);
|
|
396
|
+
left: calc(var(--slds-g-spacing-2) * -1);
|
|
397
397
|
}
|
|
398
398
|
:host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],:host([data-render-mode="shadow"])
|
|
399
399
|
.slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
|
|
400
|
-
right: (var(--slds-g-spacing-2) * -1);
|
|
400
|
+
right: calc(var(--slds-g-spacing-2) * -1);
|
|
401
401
|
}
|
|
402
402
|
:host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown,:host([data-render-mode="shadow"])
|
|
403
403
|
.slds-dropdown-trigger_hover .slds-dropdown {
|
|
@@ -489,15 +489,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
489
489
|
width: 100%;
|
|
490
490
|
}
|
|
491
491
|
:host([data-render-mode="shadow"]) .slds-dropdown_length-5 {
|
|
492
|
-
max-height: calc((var(--slds-g-font-scale-neg-3)
|
|
492
|
+
max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 5);
|
|
493
493
|
overflow-y: auto;
|
|
494
494
|
}
|
|
495
495
|
:host([data-render-mode="shadow"]) .slds-dropdown_length-7 {
|
|
496
|
-
max-height: calc((var(--slds-g-font-scale-neg-3)
|
|
496
|
+
max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 7);
|
|
497
497
|
overflow-y: auto;
|
|
498
498
|
}
|
|
499
499
|
:host([data-render-mode="shadow"]) .slds-dropdown_length-10 {
|
|
500
|
-
max-height: calc((var(--slds-g-font-scale-neg-3)
|
|
500
|
+
max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 10);
|
|
501
501
|
overflow-y: auto;
|
|
502
502
|
}
|
|
503
503
|
:host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-5 {
|
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
--sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
|
|
247
247
|
--sds-c-inputtext-font-size: var(
|
|
248
248
|
--slds-c-inputtext-font-size,
|
|
249
|
-
var(--slds-g-font-
|
|
249
|
+
var(--slds-g-font-size-base)
|
|
250
250
|
);
|
|
251
251
|
--sds-c-inputtext-text-color-placeholder: var(
|
|
252
252
|
--slds-c-inputtext-text-color-placeholder,
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
|
|
265
265
|
display: flex;
|
|
266
266
|
flex-wrap: wrap;
|
|
267
|
-
|
|
267
|
+
flex-direction: column;
|
|
268
268
|
}
|
|
269
269
|
/**
|
|
270
270
|
* Input Container
|
|
@@ -371,6 +371,10 @@
|
|
|
371
371
|
--sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
|
|
372
372
|
--sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
|
|
373
373
|
}
|
|
374
|
+
:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
|
|
375
|
+
--sds-c-inputtext-text-color-placeholder:
|
|
376
|
+
var(--slds-g-color-on-disabled-2);
|
|
377
|
+
}
|
|
374
378
|
/**
|
|
375
379
|
* Label
|
|
376
380
|
*
|
|
@@ -384,10 +388,7 @@
|
|
|
384
388
|
--slds-c-inputtext-label-color,
|
|
385
389
|
var(--slds-g-color-on-surface-2)
|
|
386
390
|
);
|
|
387
|
-
font-size: var(
|
|
388
|
-
--slds-c-inputtext-label-font-size,
|
|
389
|
-
var(--slds-g-font-scale-neg-3)
|
|
390
|
-
);
|
|
391
|
+
font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
|
|
391
392
|
margin-block-end: var(--slds-g-sizing-1);
|
|
392
393
|
|
|
393
394
|
/* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
2
|
<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
|
|
3
3
|
<capabilities>
|
|
4
|
-
<capability>
|
|
4
|
+
<capability>lightning__ServerRenderableWithHydration</capability>
|
|
5
5
|
</capabilities>
|
|
6
6
|
</LightningComponentBundle>
|
|
@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
280
280
|
|
|
281
281
|
/* Text color */
|
|
282
282
|
--sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
|
|
283
|
-
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
|
|
283
|
+
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
|
|
284
284
|
--sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
|
|
285
285
|
--sds-c-button-text-color-active: var(
|
|
286
286
|
--slds-c-button-neutral-text-color-active,
|
|
@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
296
296
|
--sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
|
|
297
297
|
--sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
|
|
298
298
|
--sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
|
|
299
|
+
|
|
300
|
+
/**
|
|
301
|
+
* Needed to override
|
|
302
|
+
* `pointer-event: none` coming from sds
|
|
303
|
+
* that prevent tooltip from showing
|
|
304
|
+
*/
|
|
305
|
+
pointer-events: auto;
|
|
306
|
+
cursor: default;
|
|
299
307
|
}
|
|
300
308
|
/**
|
|
301
309
|
* A note about fallbacks on the default variant:
|
|
@@ -315,36 +323,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
315
323
|
:host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
|
|
316
324
|
--slds-c-button-neutral-color-background: var(
|
|
317
325
|
--slds-c-button-brand-color-background,
|
|
318
|
-
var(--slds-g-color-accent-container-
|
|
326
|
+
var(--slds-g-color-accent-container-1)
|
|
319
327
|
);
|
|
320
328
|
--slds-c-button-neutral-color-background-hover: var(
|
|
321
329
|
--slds-c-button-brand-color-background-hover,
|
|
322
|
-
var(--slds-g-color-accent-container-
|
|
330
|
+
var(--slds-g-color-accent-container-2)
|
|
323
331
|
);
|
|
324
332
|
--slds-c-button-neutral-color-background-focus: var(
|
|
325
333
|
--slds-c-button-brand-color-background-focus,
|
|
326
|
-
var(--slds-g-color-accent-container-
|
|
334
|
+
var(--slds-g-color-accent-container-2)
|
|
327
335
|
);
|
|
328
336
|
--slds-c-button-neutral-color-background-active: var(
|
|
329
337
|
--slds-c-button-brand-color-background-active,
|
|
330
|
-
var(--slds-g-color-accent-container-
|
|
338
|
+
var(--slds-g-color-accent-container-2)
|
|
331
339
|
);
|
|
332
340
|
|
|
333
341
|
--slds-c-button-neutral-color-border: var(
|
|
334
342
|
--slds-c-button-brand-color-border,
|
|
335
|
-
var(--slds-g-color-border-accent-
|
|
343
|
+
var(--slds-g-color-border-accent-1)
|
|
336
344
|
);
|
|
337
345
|
--slds-c-button-neutral-color-border-hover: var(
|
|
338
346
|
--slds-c-button-brand-color-border-hover,
|
|
339
|
-
var(--slds-g-color-border-accent-
|
|
347
|
+
var(--slds-g-color-border-accent-2)
|
|
340
348
|
);
|
|
341
349
|
--slds-c-button-neutral-color-border-focus: var(
|
|
342
350
|
--slds-c-button-brand-color-border-focus,
|
|
343
|
-
var(--slds-g-color-border-accent-
|
|
351
|
+
var(--slds-g-color-border-accent-2)
|
|
344
352
|
);
|
|
345
353
|
--slds-c-button-neutral-color-border-active: var(
|
|
346
354
|
--slds-c-button-brand-color-border-active,
|
|
347
|
-
var(--slds-g-color-border-accent-
|
|
355
|
+
var(--slds-g-color-border-accent-2)
|
|
348
356
|
);
|
|
349
357
|
|
|
350
358
|
/* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
|
|
@@ -396,7 +404,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
396
404
|
--slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
|
|
397
405
|
--slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
|
|
398
406
|
--slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
|
|
399
|
-
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-
|
|
407
|
+
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
|
|
400
408
|
--slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
|
|
401
409
|
--slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
|
|
402
410
|
--slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
|
|
@@ -283,7 +283,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
283
283
|
|
|
284
284
|
/* Text color */
|
|
285
285
|
--sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
|
|
286
|
-
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
|
|
286
|
+
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
|
|
287
287
|
--sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
|
|
288
288
|
--sds-c-button-text-color-active: var(
|
|
289
289
|
--slds-c-button-neutral-text-color-active,
|
|
@@ -299,6 +299,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
299
299
|
--sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
|
|
300
300
|
--sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
|
|
301
301
|
--sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
|
|
302
|
+
|
|
303
|
+
/**
|
|
304
|
+
* Needed to override
|
|
305
|
+
* `pointer-event: none` coming from sds
|
|
306
|
+
* that prevent tooltip from showing
|
|
307
|
+
*/
|
|
308
|
+
pointer-events: auto;
|
|
309
|
+
cursor: default;
|
|
302
310
|
}
|
|
303
311
|
/**
|
|
304
312
|
* A note about fallbacks on the default variant:
|
|
@@ -318,36 +326,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
318
326
|
:host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
|
|
319
327
|
--slds-c-button-neutral-color-background: var(
|
|
320
328
|
--slds-c-button-brand-color-background,
|
|
321
|
-
var(--slds-g-color-accent-container-
|
|
329
|
+
var(--slds-g-color-accent-container-1)
|
|
322
330
|
);
|
|
323
331
|
--slds-c-button-neutral-color-background-hover: var(
|
|
324
332
|
--slds-c-button-brand-color-background-hover,
|
|
325
|
-
var(--slds-g-color-accent-container-
|
|
333
|
+
var(--slds-g-color-accent-container-2)
|
|
326
334
|
);
|
|
327
335
|
--slds-c-button-neutral-color-background-focus: var(
|
|
328
336
|
--slds-c-button-brand-color-background-focus,
|
|
329
|
-
var(--slds-g-color-accent-container-
|
|
337
|
+
var(--slds-g-color-accent-container-2)
|
|
330
338
|
);
|
|
331
339
|
--slds-c-button-neutral-color-background-active: var(
|
|
332
340
|
--slds-c-button-brand-color-background-active,
|
|
333
|
-
var(--slds-g-color-accent-container-
|
|
341
|
+
var(--slds-g-color-accent-container-2)
|
|
334
342
|
);
|
|
335
343
|
|
|
336
344
|
--slds-c-button-neutral-color-border: var(
|
|
337
345
|
--slds-c-button-brand-color-border,
|
|
338
|
-
var(--slds-g-color-border-accent-
|
|
346
|
+
var(--slds-g-color-border-accent-1)
|
|
339
347
|
);
|
|
340
348
|
--slds-c-button-neutral-color-border-hover: var(
|
|
341
349
|
--slds-c-button-brand-color-border-hover,
|
|
342
|
-
var(--slds-g-color-border-accent-
|
|
350
|
+
var(--slds-g-color-border-accent-2)
|
|
343
351
|
);
|
|
344
352
|
--slds-c-button-neutral-color-border-focus: var(
|
|
345
353
|
--slds-c-button-brand-color-border-focus,
|
|
346
|
-
var(--slds-g-color-border-accent-
|
|
354
|
+
var(--slds-g-color-border-accent-2)
|
|
347
355
|
);
|
|
348
356
|
--slds-c-button-neutral-color-border-active: var(
|
|
349
357
|
--slds-c-button-brand-color-border-active,
|
|
350
|
-
var(--slds-g-color-border-accent-
|
|
358
|
+
var(--slds-g-color-border-accent-2)
|
|
351
359
|
);
|
|
352
360
|
|
|
353
361
|
/* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
|
|
@@ -399,7 +407,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
399
407
|
--slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
|
|
400
408
|
--slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
|
|
401
409
|
--slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
|
|
402
|
-
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-
|
|
410
|
+
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
|
|
403
411
|
--slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
|
|
404
412
|
--slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
|
|
405
413
|
--slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
|
|
@@ -545,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
545
553
|
--sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
|
|
546
554
|
}
|
|
547
555
|
/* slds-icon interaction states */
|
|
548
|
-
:host([data-render-mode="shadow"]) [part~='button-icon']:
|
|
556
|
+
:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
|
|
549
557
|
--slds-c-icon-color-foreground: var(
|
|
550
|
-
--slds-c-buttonicon-color-foreground-hover,
|
|
558
|
+
--slds-c-buttonicon-color-foreground-hover,
|
|
551
559
|
var(--slds-g-color-accent-3)
|
|
552
560
|
);
|
|
553
561
|
}
|
|
554
|
-
:host([data-render-mode="shadow"]) [part~='button-icon']:
|
|
562
|
+
:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
|
|
555
563
|
--slds-c-icon-color-foreground: var(
|
|
556
564
|
--slds-c-buttonicon-color-foreground-focus,
|
|
557
565
|
var(--slds-g-color-accent-3)
|
|
558
566
|
);
|
|
559
567
|
}
|
|
560
|
-
:host([data-render-mode="shadow"]) [part~='button-icon']:
|
|
568
|
+
:host([data-render-mode="shadow"]) [part~='button-icon']:active {
|
|
561
569
|
--slds-c-icon-color-foreground: var(
|
|
562
570
|
--slds-c-buttonicon-color-foreground-active,
|
|
563
571
|
var(--slds-g-color-accent-3)
|
|
@@ -635,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
635
643
|
|
|
636
644
|
/* Icon */
|
|
637
645
|
--slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
|
|
638
|
-
--slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-
|
|
646
|
+
--slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
|
|
639
647
|
--slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
|
|
640
648
|
--slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
|
|
641
649
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { api } from 'lwc';
|
|
2
2
|
import { classSet } from 'lightning/utils';
|
|
3
|
-
import { normalizeString as normalize
|
|
3
|
+
import { normalizeString as normalize } from 'lightning/utilsPrivate';
|
|
4
4
|
// remove-next-line-for-c-namespace
|
|
5
5
|
import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
|
|
6
6
|
import LightningPrimitiveButton from 'lightning/primitiveButton';
|
|
@@ -120,6 +120,24 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
|
|
|
120
120
|
*/
|
|
121
121
|
@api alternativeText;
|
|
122
122
|
|
|
123
|
+
/**
|
|
124
|
+
* Reserved for internal use only.
|
|
125
|
+
* Specifies the type of tooltip to be used.
|
|
126
|
+
* Use info in cases where target already has click handlers.
|
|
127
|
+
* Use toggle in cases where target only shows a tooltip, such as helptext.
|
|
128
|
+
* @type {string}
|
|
129
|
+
* @default info
|
|
130
|
+
*/
|
|
131
|
+
@api tooltipType = TooltipType.Info;
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* Reserved for internal use only.
|
|
135
|
+
* Disables the alternative text being used for the button title when the title has not been provided.
|
|
136
|
+
* @type {boolean}
|
|
137
|
+
* @default false
|
|
138
|
+
*/
|
|
139
|
+
@api disableAlternativeTextTitle = false;
|
|
140
|
+
|
|
123
141
|
// remove-next-line-for-c-namespace
|
|
124
142
|
/**
|
|
125
143
|
* Text to display when the user mouses over or focuses on the button.
|
|
@@ -145,9 +163,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
|
|
|
145
163
|
// remove-next-line-for-c-namespace
|
|
146
164
|
_tooltip = null;
|
|
147
165
|
tooltipValue = null;
|
|
148
|
-
tooltipType = TooltipType.Info;
|
|
149
166
|
rendered = false;
|
|
150
|
-
showTitle = true;
|
|
151
167
|
|
|
152
168
|
/**
|
|
153
169
|
* Generate a tooltip with the specified value and current tooltip type
|
|
@@ -169,10 +185,16 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
|
|
|
169
185
|
}
|
|
170
186
|
|
|
171
187
|
get computedTitle() {
|
|
172
|
-
// Assign after renderedCallback
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
188
|
+
// Assign after renderedCallback to avoid hydration mismatch.
|
|
189
|
+
if (this.rendered) {
|
|
190
|
+
if (this.title) {
|
|
191
|
+
return this.title;
|
|
192
|
+
}
|
|
193
|
+
if (!this.disableAlternativeTextTitle) {
|
|
194
|
+
return this.alternativeText;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
return null;
|
|
176
198
|
}
|
|
177
199
|
|
|
178
200
|
normalizeVariant(variant) {
|
|
@@ -333,24 +355,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
|
|
|
333
355
|
connectedCallback() {
|
|
334
356
|
super.connectedCallback();
|
|
335
357
|
this._connected = true;
|
|
336
|
-
if (isCSR) {
|
|
337
|
-
this.dispatchEvent(
|
|
338
|
-
new CustomEvent('privatebuttoniconregister', {
|
|
339
|
-
cancelable: true,
|
|
340
|
-
bubbles: true,
|
|
341
|
-
detail: {
|
|
342
|
-
// Tooltip type should be toggle for some consumers like helptext
|
|
343
|
-
setTooltipType: (tooltipType) => {
|
|
344
|
-
this.tooltipType = tooltipType;
|
|
345
|
-
},
|
|
346
|
-
// Title should not be set for some consumers like helptext (see W-12496300)
|
|
347
|
-
showTitle: (showTitle) => {
|
|
348
|
-
this.showTitle = showTitle;
|
|
349
|
-
},
|
|
350
|
-
},
|
|
351
|
-
})
|
|
352
|
-
);
|
|
353
|
-
}
|
|
354
358
|
}
|
|
355
359
|
|
|
356
360
|
renderedCallback() {
|
|
@@ -372,7 +376,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
|
|
|
372
376
|
super.disconnectedCallback();
|
|
373
377
|
this._connected = false;
|
|
374
378
|
this.rendered = false;
|
|
375
|
-
this.showTitle = true;
|
|
376
379
|
if (this._tooltip) {
|
|
377
380
|
this._tooltip.disconnect();
|
|
378
381
|
}
|
|
@@ -283,7 +283,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
283
283
|
|
|
284
284
|
/* Text color */
|
|
285
285
|
--sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
|
|
286
|
-
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
|
|
286
|
+
--sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
|
|
287
287
|
--sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
|
|
288
288
|
--sds-c-button-text-color-active: var(
|
|
289
289
|
--slds-c-button-neutral-text-color-active,
|
|
@@ -299,6 +299,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
299
299
|
--sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
|
|
300
300
|
--sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
|
|
301
301
|
--sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
|
|
302
|
+
|
|
303
|
+
/**
|
|
304
|
+
* Needed to override
|
|
305
|
+
* `pointer-event: none` coming from sds
|
|
306
|
+
* that prevent tooltip from showing
|
|
307
|
+
*/
|
|
308
|
+
pointer-events: auto;
|
|
309
|
+
cursor: default;
|
|
302
310
|
}
|
|
303
311
|
/**
|
|
304
312
|
* A note about fallbacks on the default variant:
|
|
@@ -318,36 +326,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
318
326
|
:host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
|
|
319
327
|
--slds-c-button-neutral-color-background: var(
|
|
320
328
|
--slds-c-button-brand-color-background,
|
|
321
|
-
var(--slds-g-color-accent-container-
|
|
329
|
+
var(--slds-g-color-accent-container-1)
|
|
322
330
|
);
|
|
323
331
|
--slds-c-button-neutral-color-background-hover: var(
|
|
324
332
|
--slds-c-button-brand-color-background-hover,
|
|
325
|
-
var(--slds-g-color-accent-container-
|
|
333
|
+
var(--slds-g-color-accent-container-2)
|
|
326
334
|
);
|
|
327
335
|
--slds-c-button-neutral-color-background-focus: var(
|
|
328
336
|
--slds-c-button-brand-color-background-focus,
|
|
329
|
-
var(--slds-g-color-accent-container-
|
|
337
|
+
var(--slds-g-color-accent-container-2)
|
|
330
338
|
);
|
|
331
339
|
--slds-c-button-neutral-color-background-active: var(
|
|
332
340
|
--slds-c-button-brand-color-background-active,
|
|
333
|
-
var(--slds-g-color-accent-container-
|
|
341
|
+
var(--slds-g-color-accent-container-2)
|
|
334
342
|
);
|
|
335
343
|
|
|
336
344
|
--slds-c-button-neutral-color-border: var(
|
|
337
345
|
--slds-c-button-brand-color-border,
|
|
338
|
-
var(--slds-g-color-border-accent-
|
|
346
|
+
var(--slds-g-color-border-accent-1)
|
|
339
347
|
);
|
|
340
348
|
--slds-c-button-neutral-color-border-hover: var(
|
|
341
349
|
--slds-c-button-brand-color-border-hover,
|
|
342
|
-
var(--slds-g-color-border-accent-
|
|
350
|
+
var(--slds-g-color-border-accent-2)
|
|
343
351
|
);
|
|
344
352
|
--slds-c-button-neutral-color-border-focus: var(
|
|
345
353
|
--slds-c-button-brand-color-border-focus,
|
|
346
|
-
var(--slds-g-color-border-accent-
|
|
354
|
+
var(--slds-g-color-border-accent-2)
|
|
347
355
|
);
|
|
348
356
|
--slds-c-button-neutral-color-border-active: var(
|
|
349
357
|
--slds-c-button-brand-color-border-active,
|
|
350
|
-
var(--slds-g-color-border-accent-
|
|
358
|
+
var(--slds-g-color-border-accent-2)
|
|
351
359
|
);
|
|
352
360
|
|
|
353
361
|
/* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
|
|
@@ -399,7 +407,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
399
407
|
--slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
|
|
400
408
|
--slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
|
|
401
409
|
--slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
|
|
402
|
-
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-
|
|
410
|
+
--slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
|
|
403
411
|
--slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
|
|
404
412
|
--slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
|
|
405
413
|
--slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
|
|
@@ -545,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
545
553
|
--sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
|
|
546
554
|
}
|
|
547
555
|
/* slds-icon interaction states */
|
|
548
|
-
:host([data-render-mode="shadow"]) [part~='button-icon']:
|
|
556
|
+
:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
|
|
549
557
|
--slds-c-icon-color-foreground: var(
|
|
550
|
-
--slds-c-buttonicon-color-foreground-hover,
|
|
558
|
+
--slds-c-buttonicon-color-foreground-hover,
|
|
551
559
|
var(--slds-g-color-accent-3)
|
|
552
560
|
);
|
|
553
561
|
}
|
|
554
|
-
:host([data-render-mode="shadow"]) [part~='button-icon']:
|
|
562
|
+
:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
|
|
555
563
|
--slds-c-icon-color-foreground: var(
|
|
556
564
|
--slds-c-buttonicon-color-foreground-focus,
|
|
557
565
|
var(--slds-g-color-accent-3)
|
|
558
566
|
);
|
|
559
567
|
}
|
|
560
|
-
:host([data-render-mode="shadow"]) [part~='button-icon']:
|
|
568
|
+
:host([data-render-mode="shadow"]) [part~='button-icon']:active {
|
|
561
569
|
--slds-c-icon-color-foreground: var(
|
|
562
570
|
--slds-c-buttonicon-color-foreground-active,
|
|
563
571
|
var(--slds-g-color-accent-3)
|
|
@@ -635,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
|
|
|
635
643
|
|
|
636
644
|
/* Icon */
|
|
637
645
|
--slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
|
|
638
|
-
--slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-
|
|
646
|
+
--slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
|
|
639
647
|
--slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
|
|
640
648
|
--slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
|
|
641
649
|
|