Remove fonts from the tokens as they derive from the app
parent
70fcb36649
commit
56d099f2fa
|
@ -13,6 +13,8 @@ export default {
|
|||
border: 1px solid ${dt('button.primary.border.color')};
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
font-feature-settings: inherit;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
border-radius: ${dt('rounded.base')};
|
||||
outline-color: transparent;
|
||||
|
|
|
@ -129,8 +129,6 @@ export default {
|
|||
}
|
||||
|
||||
.p-component {
|
||||
font-family: ${dt('font.family')};
|
||||
font-feature-settings: ${dt('font.feature.settings')};
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
@ -163,8 +161,8 @@ export default {
|
|||
}
|
||||
|
||||
.p-link {
|
||||
font-family: ${dt('font.family')};
|
||||
font-feature-settings: ${dt('font.feature.settings')};
|
||||
font-family: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-size: 1rem;
|
||||
border-radius: 6px;
|
||||
outline-color: transparent;
|
||||
|
|
|
@ -114,8 +114,6 @@ export default {
|
|||
stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
|
||||
},
|
||||
semantic: {
|
||||
fontFamily: '"Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
|
||||
transitionDuration: '0.2s',
|
||||
focusRing: {
|
||||
width: '1px',
|
||||
|
|
|
@ -53,8 +53,6 @@ export default {
|
|||
stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
|
||||
},
|
||||
semantic: {
|
||||
fontFamily: 'system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
|
||||
fontFeatureSettings: 'normal',
|
||||
transitionDuration: '0.2s',
|
||||
focusRing: {
|
||||
width: '1px',
|
||||
|
|
|
@ -1,27 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Presets use the native font stack by default for optimal rendering depending on the platform. If you have installed a specific font stack in your application, use the <i>fontFamily</i> and the optional <i>fontVariationSettings</i> tokens
|
||||
to define your custom font for PrimeVue components. As example, let's configure the popular <i>Inter</i> for PrimeVue.
|
||||
</p>
|
||||
<p>There is no design for fonts as UI components inherit their font settings from the application.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
const MyPreset = definePreset(Aura, {
|
||||
semantic: {
|
||||
fontFamily: 'Inter, sans-serif'
|
||||
}
|
||||
});
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue