diff --git a/packages/nuxt-ripple/app.config.ts b/packages/nuxt-ripple/app.config.ts index 60c350fc08..5e2b0e039f 100644 --- a/packages/nuxt-ripple/app.config.ts +++ b/packages/nuxt-ripple/app.config.ts @@ -26,6 +26,7 @@ declare module '@nuxt/schema' { name: string url: string rtl?: boolean + styles?: Record } } search?: { @@ -71,7 +72,10 @@ export default defineAppConfig({ ar: { name: 'Noto Kufi Arabic', url: 'https://fonts.googleapis.com/earlyaccess/notokufiarabic.css', - rtl: true + rtl: true, + styles: { + '.rpl-type-p-large-highlight': 'line-height: var(--rpl-type-lh-9)' + } }, bn: { name: 'Noto Sans Bengali', diff --git a/packages/nuxt-ripple/composables/use-tide-language.ts b/packages/nuxt-ripple/composables/use-tide-language.ts index 042aa9c1dd..1a5d10b8d1 100644 --- a/packages/nuxt-ripple/composables/use-tide-language.ts +++ b/packages/nuxt-ripple/composables/use-tide-language.ts @@ -24,12 +24,20 @@ export default (page: any) => { const direction = computed(() => (found.value?.rtl ? 'rtl' : 'ltr')) if (found.value) { + let customCSS = '' + + if (found.value?.styles) { + Object.keys(found.value.styles).forEach((selector) => { + customCSS += `.${language.value} ${selector} { ${found.value.styles[selector]}; }` + }) + } + useHead({ link: [{ rel: 'stylesheet', href: found.value?.url }], style: [ { children: ` - .${language.value} * { font-family: '${found.value?.name}', var(--rpl-type-font-family) !important } + .${language.value} * { font-family: '${found.value?.name}', var(--rpl-type-font-family) !important } ${customCSS} ` } ]