71 lines
No EOL
1.4 KiB
Vue
71 lines
No EOL
1.4 KiB
Vue
<template>
|
|
<button class="Button" :class="[color, display]">
|
|
<slot />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
color ?: 'success' | 'error' | 'neutral' | 'inherit'
|
|
display ?: 'elevated' | 'text' | 'icon'
|
|
}
|
|
|
|
const { color = 'success', display = 'elevated' } = defineProps<Props>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.Button {
|
|
all: unset;
|
|
--btn-clr: var(--clr-black);
|
|
--btn-clr-contrast: var(--clr-white);
|
|
--btn-text: var(--clr-black);
|
|
--btn-bg: var(--clr-white);
|
|
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
cursor: pointer;
|
|
padding: var(--padding-xs) var(--padding-default);
|
|
border-radius: var(--radius-default);
|
|
font-weight: 400;
|
|
|
|
color: var(--btn-text);
|
|
background-color: var(--btn-bg);
|
|
|
|
&.success {
|
|
--btn-clr: var(--clr-success);
|
|
--btn-clr-contrast: var(--clr-success-contrast);
|
|
}
|
|
|
|
&.error {
|
|
--btn-clr: var(--clr-error);
|
|
--btn-clr-contrast: var(--clr-error-contrast);
|
|
}
|
|
|
|
&.neutral {
|
|
--btn-clr: var(--clr-neutral);
|
|
--btn-clr-contrast: var(--clr-neutral-contrast);
|
|
}
|
|
|
|
&.inherit {
|
|
--btn-clr: inherit;
|
|
--btn-clr-contrast: inherit;
|
|
}
|
|
|
|
&.elevated {
|
|
--btn-bg: var(--btn-clr);
|
|
--btn-text: var(--btn-clr-contrast);
|
|
box-shadow: var(--box-shadow-z2);
|
|
}
|
|
|
|
&.text {
|
|
--btn-bg: transparent;
|
|
--btn-text: var(--btn-clr);
|
|
}
|
|
|
|
&.icon {
|
|
--btn-bg: transparent;
|
|
--btn-text: var(--btn-clr);
|
|
padding: var(--padding-xs);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style> |