Add new styles setting to button to use update spectrum styles
This commit is contained in:
parent
b3d326c41b
commit
eb2fd47e44
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue