63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
muted?: boolean
|
|
dark?: boolean
|
|
small?: boolean
|
|
smaller?: boolean,
|
|
smallest?: boolean,
|
|
uppercase?: boolean
|
|
smallSpacing?: boolean
|
|
largeSpacing?: boolean
|
|
}>(), {
|
|
size: 'medium',
|
|
muted: false,
|
|
uppercase: false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<span class="mono-tag" :class="{ 'muted': muted, 'dark' : dark ,'text-sm': small, 'text-smaller': smaller, 'text-smallest': smallest, 'uppercase': uppercase, 'small-spacing': smallSpacing, 'large-spacing': largeSpacing}">
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mono-tag {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.dark{
|
|
color: rgb(85, 85, 102);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.text-sm{
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.text-smaller{
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.text-smallest{
|
|
font-size: 0.62rem;
|
|
}
|
|
|
|
.muted{
|
|
color: rgb(119, 136, 153);;
|
|
}
|
|
|
|
.uppercase{
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.small-spacing{
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.large-spacing{
|
|
letter-spacing: 0.18em;
|
|
}
|
|
</style>
|