Add new styles setting to button to use update spectrum styles

This commit is contained in:
Andrew Kingston 2022-06-10 12:15:58 +01:00
parent b3d326c41b
commit eb2fd47e44
1 changed files with 18 additions and 0 deletions

View File

@ -14,6 +14,7 @@
export let active = false export let active = false
export let tooltip = undefined export let tooltip = undefined
export let dataCy export let dataCy
export let newStyles = false
let showTooltip = false let showTooltip = false
</script> </script>
@ -25,6 +26,7 @@
class:spectrum-Button--warning={warning} class:spectrum-Button--warning={warning}
class:spectrum-Button--overBackground={overBackground} class:spectrum-Button--overBackground={overBackground}
class:spectrum-Button--quiet={quiet} class:spectrum-Button--quiet={quiet}
class:new-styles={newStyles}
class:active class:active
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
{disabled} {disabled}
@ -93,4 +95,20 @@
padding-left: var(--spacing-m); padding-left: var(--spacing-m);
line-height: 0; line-height: 0;
} }
.spectrum-Button--primary.new-styles {
background: var(--spectrum-global-color-gray-800);
border-color: transparent;
color: var(--spectrum-global-color-gray-50);
}
.spectrum-Button--primary.new-styles:hover {
background: var(--spectrum-global-color-gray-900);
}
.spectrum-Button--secondary.new-styles {
background: var(--spectrum-global-color-gray-200);
border-color: transparent;
color: var(--spectrum-global-color-gray-900);
}
.spectrum-Button--secondary.new-styles:hover {
background: var(--spectrum-global-color-gray-300);
}
</style> </style>