Changing font & color - Exploring presetWebFonts preset

[jd-solanki]

Discussed in #158

^{Originally posted by Sandros94 April 11, 2023}
I noticed that the scss from the presetThemeDefault applies the Inter font:

anu/packages/preset-theme-default/src/scss/index.scss

Lines 9 to 11 in d1e14de

	$body-color: hsla(var(--a-base-c), 0.68);
	$body-font-family: 'Inter', sans-serif;
	$header-font-family: $body-font-family;

anu/packages/preset-theme-default/src/scss/index.scss

Lines 89 to 107 in d1e14de

	body {
	background-color: hsl(var(--a-body-bg-c));
	color: $body-color;
	// Disable mobile tap blue color
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	font-family: $body-font-family;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	color: hsla(var(--a-base-c), 0.87);
	font-family: $header-font-family;
	}

Can I change it from uno.config.ts or should I just overwrite the body and heading styles?

[sandros94]

If I can help you just ping me.
I'm not that great with js/ts yet, but I'm learning and I'm starting to get a decent knowledge of Nuxt 3

[jd-solanki]

oh, So nice of you 🙏🏻

Sure, I will let you know 😇

[jd-solanki]

Hey @sandros94

Thanks for your patience and reporting the issue. Anu now no longer handles the font-family customization, Instead we now allow using presetWebFonts for fetching & changing the font-family.

From the next release (now on, if you are using edge releases) you will be able to customize the fonts via web fonts UnoCSS preset.

For color, We now have CSS variable for each theme so that can you can have different color for each theme: https://github.com/jd-solanki/anu/blob/main/packages/anu-vue/src/plugin.ts#L39

Please let me know your thoughts on this.

[sandros94]

I'll checkout the edge release as soon as I get back home/office. The changes look perfect already ♥️

[sandros94]

In the end its quite late here and I'll check it out tomorrow.

But while thinking about it I've come to notice that I don't have a clear understanding on how to change the color (or add a new one) only using uno.config.ts (in a nuxt project). At the point where reading the docs I'm doubting it.

[sandros94]

EDIT

just read your last comment on the other issue:

Due to some issues, action wasn't able to make a edge release to test the latest release I said about. I will let you know once edge release will continue to work.

---

I was creating a test branch to test this, under the same branch for #155. But then I got distracted on new info for that issue.

Anyway, here is the new test branch, and I need your help to understand how to use Anu with presetWebFonts and customize Anu's colors via uno.config.ts.

As you can see in that branch I still need to specify the changes as css:

<style>
body {
    color: hsla(var(--a-base-c), 1.0);
    @apply bg-white dark:bg-#101010 font-sans;
}
h1, h2, h3, h4, h5, h6 {
    color: inherit;
    @apply font-sans;
}
</style>

even though I do have the presetWebFonts configured correctly:

export default defineConfig({
    [...]
    presets: [
        [...]
        presetWebFonts({
            fonts: {
                sans: 'Jost:100,200,300,400,500,600,700,800,900',
                mono: ['Fira Code:400,500,600,700', 'Fira Mono:400,500,600,700']
            },
        }),
        [...]
})

while for the color configuration of the Anu theme, as I said in the last comment, I really didn't understand how to do it in the uno.config.ts.

I would like to understand these a bit more, so that I could potentially improve the Anu documentation, especially for newcomers like me that don't have all that experience (yet).

---

P.S.: I did try out the useAnu composable but I feel like that is more for a different usecase.
In my situation I preferred to customize all my UnoCSS and Anu inside the uno.config.ts and use useAnu only on those deployments that I let the user customize the colors during production.

[jd-solanki]

Hi, I have made a new release. Can you please give it a try?

[sandros94]

I've tested v0.14.0 and indeed it picks up the presetWebFonts conifgs. (still testing on the linked branch)
But I'm probably doing something wrong because I still need to specify in the vue style to apply the unocss font-sans.

Another thing that is still not clear to me on how to customize my presetAnu:
I do personally like creating boilerplates for potential future projects, where I don't much need changing variables at runtime but I do need to edit my configs while still on dev. What would be the process (or syntax) to edit my presetAnu config to change things like how a-base-c is applied to headings, or defining a secondary color without the use of useAnu, since I do not need to change it in runtime.

One last thing:
I'm noticing that in the unocss conifg now I get a warning regarding types when importing presetAnu from anu-vue

Could not find a declaration file for module 'anu-vue'. 'c:/GitHub/Sandros94/test-nuxt3app/node_modules/anu-vue/dist/anu-vue.umd.cjs' implicitly has an 'any' type.
Try npm i --save-dev @types/anu-vue if it exists or add a new declaration (.d.ts) file containing declare module 'anu-vue';ts(7016)

[jd-solanki]

I still need to specify in the vue style to apply the unocss font-sans

You mean you still have to write font-family: 'xxx', right? If yes, That happened to me as well. Maybe we have to first test if this is from UnoCSS or not.

how to customize my presetAnu

I'm willing to add docs for this. If you have something to ask regarding this, let's discuss this in discord thread.

I get a warning

🤔 Strange, I'll look into this

[sandros94]

You mean you still have to write font-family: 'xxx', right? Maybe we have to first test if this is from UnoCSS or not.

Yes, and indeed this is the case: on a fresh unocss install (without anu) I have to specify the font-family (even for sans).

I'm willing to add docs for this. If you have something to ask regarding this, let's discuss this in discord thread.

Sounds good, later I'll open the discussion there.

[jd-solanki]

I have to specify the font-family

Can you please raise issue on uno repo and reference here for tracking?

[sandros94]

Can you please raise issue on uno repo and reference here for tracking?

it has been a busy day, doing it now.

[jd-solanki]

Hi @sandros94 Apart from mentioned issue. I think everything is resolved now from Anu's side, Am I right?

[sandros94]

I would say yes. We'll see how it goes there from this point on.

[sandros94]

@jd-solanki following the reply we got there I would close this issue as fully completed now.

[jd-solanki]

@sandros94 Yes, Let's close this.