diff --git a/app/app.vue b/app/app.vue index 91e3e28..37b0eab 100644 --- a/app/app.vue +++ b/app/app.vue @@ -96,7 +96,7 @@ const setupGameHead = (data: GameDataValue) => { const designTheme = data.design_theme === 1 ? 'light' : 'dark' const styleLinks = createStyleLinks( data.favicon_json, - data?.game_font_key_json?.font_path + data?.game_font_json?.font_path ) const styleCss = createStyleCss(data.key_color_json) diff --git a/layers/components/atoms/Button/index.vue b/layers/components/atoms/Button/index.vue index 6547678..c7452bf 100644 --- a/layers/components/atoms/Button/index.vue +++ b/layers/components/atoms/Button/index.vue @@ -11,6 +11,7 @@ interface props { textColor?: string disabled?: boolean gradient?: boolean + useGameFont?: boolean } const props = withDefaults(defineProps(), { @@ -21,8 +22,12 @@ const props = withDefaults(defineProps(), { textColor: 'var(--alternative-02)', disabled: false, gradient: false, + useGameFont: false, }) +const gameDataStore = useGameDataStore() +const { fontFamily } = storeToRefs(gameDataStore) + const componentTag = computed((): string => { switch (props.type) { case 'external': @@ -36,12 +41,6 @@ const componentTag = computed((): string => { return 'button' } }) -const backgroundColor = computed(() => { - if (props.backgroundColor) { - return props.backgroundColor - } - return props.variant === 'filled' ? 'var(--primary)' : 'white' -}) const componentProps = computed(() => { if (props.type === 'external' || props.type === 'link') { return { @@ -72,6 +71,30 @@ const componentProps = computed(() => { return {} }) +const textColor = computed(() => { + return props.textColor ? props.textColor : 'var(--text-secondary)' +}) +const buttonStyle = computed(() => { + const backgroundColor = + props.variant === 'filled' ? 'var(--primary)' : 'white' + const style: Record = { + backgroundColor: props.backgroundColor ?? backgroundColor, + '--disabled-color': textColor.value, + } + + return style +}) +const textStyle = computed(() => { + const style: Record = { + color: textColor.value, + } + + if (props.useGameFont && fontFamily.value) { + style.fontFamily = fontFamily.value + } + + return style +})