AstralRinth/packages/ui/src/components/base/ButtonStyled.vue

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
	defineProps<{
		color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
		size?: 'standard' | 'large' | 'small'
		circular?: boolean
		type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text' | 'chip'
		colorFill?: 'auto' | 'background' | 'text' | 'none'
		hoverColorFill?: 'auto' | 'background' | 'text' | 'none'
		highlightedStyle?: 'main-nav-primary' | 'main-nav-secondary'
		highlighted?: boolean
	}>(),
	{
		color: 'standard',
		size: 'standard',
		circular: false,
		type: 'standard',
		colorFill: 'auto',
		hoverColorFill: 'auto',
		highlightedStyle: 'main-nav-primary',
		highlighted: false,
	},
)

const highlightedColorVar = computed(() => {
	switch (props.color) {
		case 'brand':
			return 'var(--color-brand-highlight)'
		case 'red':
			return 'var(--color-red-highlight)'
		case 'orange':
			return 'var(--color-orange-highlight)'
		case 'green':
			return 'var(--color-green-highlight)'
		case 'medal-promo':
		case 'blue':
			return 'var(--color-blue-highlight)'
		case 'purple':
			return 'var(--color-purple-highlight)'
		case 'standard':
		default:
			return null
	}
})

const colorVar = computed(() => {
	switch (props.color) {
		case 'brand':
			return 'var(--color-brand)'
		case 'red':
			return 'var(--color-red)'
		case 'orange':
			return 'var(--color-orange)'
		case 'green':
			return 'var(--color-green)'
		case 'blue':
			return 'var(--color-blue)'
		case 'purple':
			return 'var(--color-purple)'
		case 'medal-promo':
			return 'var(--medal-promotion-text-orange)'
		case 'standard':
		default:
			return null
	}
})

const height = computed(() => {
	if (props.size === 'large') {
		return '3rem'
	} else if (props.size === 'small') {
		return '1.5rem'
	}
	return '2.25rem'
})

const width = computed(() => {
	if (props.size === 'large') {
		return props.circular ? '3rem' : 'auto'
	} else if (props.size === 'small') {
		return props.circular ? '1.5rem' : 'auto'
	}
	return props.circular ? '2.25rem' : 'auto'
})

const paddingX = computed(() => {
	let padding = props.circular ? '0.5rem' : '0.75rem'
	if (props.size === 'large') {
		padding = props.circular ? '0.75rem' : '1rem'
	} else if (props.size === 'small') {
		padding = props.circular ? '0.125rem' : '0.5rem'
	}
	return `calc(${padding} - 0.125rem)`
})

const paddingY = computed(() => {
	if (props.size === 'large') {
		return '0.75rem'
	}
	return '0.5rem'
})

const gap = computed(() => {
	if (props.size === 'large') {
		return '0.5rem'
	} else if (props.size === 'small') {
		return '0.25rem'
	}
	return '0.375rem'
})

const fontWeight = computed(() => {
	if (props.size === 'large') {
		return '800'
	}
	return '600'
})

const radius = computed(() => {
	if (props.circular) {
		return '99999px'
	}

	if (props.size === 'large') {
		return '1rem'
	} else if (props.size === 'small') {
		return '0.5rem'
	}
	return '0.75rem'
})

const iconSize = computed(() => {
	if (props.size === 'large') {
		return '1.5rem'
	} else if (props.size === 'small') {
		return '1rem'
	}
	return '1.25rem'
})

function setColorFill(
	colors: { bg: string; text: string },
	fill: 'background' | 'text' | 'none',
): { bg: string; text: string } {
	if (colorVar.value) {
		if (fill === 'background') {
			if (props.type === 'highlight' && highlightedColorVar.value) {
				colors.bg = highlightedColorVar.value
				colors.text = 'var(--color-contrast)'
			} else if (props.type === 'highlight-colored-text' && highlightedColorVar.value) {
				colors.bg = highlightedColorVar.value
				colors.text = colorVar.value
			} else {
				colors.bg = colorVar.value
				colors.text = 'var(--color-accent-contrast)'
			}
		} else if (fill === 'text') {
			colors.text = colorVar.value
		}
	}
	return colors
}

const colorVariables = computed(() => {
	if (props.highlighted) {
		const colors = {
			bg:
				props.highlightedStyle === 'main-nav-primary'
					? 'var(--color-brand-highlight)'
					: 'var(--color-button-bg)',
			text: 'var(--color-contrast)',
			icon:
				props.type === 'chip'
					? 'var(--color-contrast)'
					: props.highlightedStyle === 'main-nav-primary'
						? 'var(--color-brand)'
						: 'var(--color-contrast)',
		}
		const hoverColors = JSON.parse(JSON.stringify(colors))
		const boxShadow =
			props.type === 'chip' && colorVar.value ? `0 0 0 2px ${colorVar.value}` : 'none'
		return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_icon: ${colors.icon}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_hover-icon: ${hoverColors.icon}; --_box-shadow: ${boxShadow};`
	}

	let colors = {
		bg: 'var(--color-button-bg)',
		text: 'var(--color-base)',
	}
	let hoverColors = JSON.parse(JSON.stringify(colors))

	if (props.type === 'outlined') {
		hoverColors.bg = 'transparent'
	}

	if (props.type === 'outlined' || props.type === 'transparent') {
		colors.bg = 'transparent'
		colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
		hoverColors = setColorFill(
			hoverColors,
			props.hoverColorFill === 'auto' ? 'text' : props.hoverColorFill,
		)
	} else if (props.type === 'chip') {
		// Chip type uses highlight-colored-text styling when colored
		if (colorVar.value && highlightedColorVar.value) {
			colors.bg = highlightedColorVar.value
			colors.text = colorVar.value
			hoverColors.bg = highlightedColorVar.value
			hoverColors.text = colorVar.value
		}
	} else {
		colors = setColorFill(colors, props.colorFill === 'auto' ? 'background' : props.colorFill)
		hoverColors = setColorFill(
			hoverColors,
			props.hoverColorFill === 'auto' ? 'background' : props.hoverColorFill,
		)
	}

	const boxShadow = props.type === 'chip' && colorVar.value ? `0 0 0 2px ${colorVar.value}` : 'none'
	return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_box-shadow: ${boxShadow};`
})

const fontSize = computed(() => {
	if (props.size === 'small') {
		return 'text-sm'
	}
	return 'text-base'
})
</script>

<template>
	<div
		class="btn-wrapper"
		:class="[{ outline: type === 'outlined', chip: type === 'chip' }, fontSize]"
		:style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};`"
	>
		<slot />
	</div>
</template>

<style scoped lang="scss">
.btn-wrapper {
	display: contents;
}

/* Searches up to 4 children deep for valid button */
.btn-wrapper :deep(:is(button, a, .button-like):first-child),
.btn-wrapper :slotted(:is(button, a, .button-like):first-child),
.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child,
.btn-wrapper :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
.btn-wrapper
	:slotted(*)
	> *:first-child
	> *:first-child
	> :is(button, a, .button-like):first-child {
	@apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
	box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
	transition:
		scale 0.125s ease-in-out,
		background-color 0.25s ease-in-out,
		color 0.25s ease-in-out,
		filter 0.25s ease-in-out;

	svg:first-child {
		color: var(--_icon, var(--_text));
		transition: color 0.25s ease-in-out;
		flex-shrink: 0;
	}

	&[disabled],
	&[disabled='true'],
	&.disabled,
	&.looks-disabled {
		@apply opacity-50;
	}

	&[disabled],
	&[disabled='true'],
	&.disabled {
		@apply cursor-not-allowed;
	}

	&:not([disabled]):not([disabled='true']):not(.disabled) {
		@apply hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness] hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text];

		&:hover svg:first-child,
		&:focus-visible svg:first-child {
			color: var(--_hover-icon, var(--_hover-text));
		}
	}
}

.btn-wrapper:not(.chip) :deep(:is(button, a, .button-like):first-child),
.btn-wrapper:not(.chip) :slotted(:is(button, a, .button-like):first-child),
.btn-wrapper:not(.chip) :slotted(*) > :is(button, a, .button-like):first-child,
.btn-wrapper:not(.chip) :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
.btn-wrapper:not(.chip)
	:slotted(*)
	> *:first-child
	> *:first-child
	> :is(button, a, .button-like):first-child {
	&:not([disabled]):not([disabled='true']):not(.disabled) {
		@apply active:scale-95;
	}
}

.btn-wrapper.outline :deep(:is(button, a, .button-like):first-child),
.btn-wrapper.outline :slotted(:is(button, a, .button-like):first-child),
.btn-wrapper.outline :slotted(*) > :is(button, a, .button-like):first-child,
.btn-wrapper.outline :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
.btn-wrapper.outline
	:slotted(*)
	> *:first-child
	> *:first-child
	> :is(button, a, .button-like):first-child {
	@apply border-current;
}

/*noinspection CssUnresolvedCustomProperty*/
.btn-wrapper :deep(:is(button, a, .button-like):first-child) > svg:first-child,
.btn-wrapper :slotted(:is(button, a, .button-like):first-child) > svg:first-child,
.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child > svg:first-child,
.btn-wrapper
	:slotted(*)
	> *:first-child
	> :is(button, a, .button-like):first-child
	> svg:first-child,
.btn-wrapper
	:slotted(*)
	> *:first-child
	> *:first-child
	> :is(button, a, .button-like):first-child
	> svg:first-child {
	min-width: var(--_icon-size, 1rem);
	min-height: var(--_icon-size, 1rem);
}

.joined-buttons {
	display: flex;
	gap: 1px;

	> .btn-wrapper:not(:first-child) {
		:deep(:is(button, a, .button-like):first-child),
		:slotted(:is(button, a, .button-like):first-child),
		:slotted(*) > :is(button, a, .button-like):first-child,
		:slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
		:slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}

	> :not(:last-child) {
		:deep(:is(button, a, .button-like):first-child),
		:slotted(:is(button, a, .button-like):first-child),
		:slotted(*) > :is(button, a, .button-like):first-child,
		:slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
		:slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
	}
}

/* guys, I know this is nuts, I know */
</style>