generated from gitea_admin/default
143 lines
3.8 KiB
Vue
143 lines
3.8 KiB
Vue
<template>
|
|
<component
|
|
:is="as"
|
|
:class="[
|
|
'ds-heading',
|
|
`ds-heading--${font}`,
|
|
`ds-heading--${resolvedsize}`,
|
|
`ds-heading--${resolvedWeight}`,
|
|
`ds-heading--${resolvedspacing}`, //margin-bottom
|
|
`ds-heading--${tone}`
|
|
]"
|
|
>
|
|
<slot />
|
|
</component>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
as: { type: String, default: 'h2' }, // h1/h2/h3/p/span...
|
|
font: { type: String, default: 'roboto' }, // barlow | brandon
|
|
tone: { type: String, default: 'default' }, // default/muted/invert
|
|
})
|
|
|
|
const resolvedWeight = computed(() => {
|
|
switch (props.as) {
|
|
case 'h1':
|
|
return 'extrabold'
|
|
case 'h2':
|
|
return 'bold'
|
|
case 'h3':
|
|
return 'semibold'
|
|
case 'h4':
|
|
return 'black'
|
|
case 'h5':
|
|
return 'medium'
|
|
case 'h6':
|
|
return 'extralight'
|
|
default:
|
|
return 'semibold'
|
|
}
|
|
})
|
|
|
|
const resolvedsize = computed(() => {
|
|
switch (props.as) {
|
|
case 'h1':
|
|
return '2xl'
|
|
case 'h2':
|
|
return 'xl'
|
|
case 'h3':
|
|
return 'lg'
|
|
case 'h4':
|
|
return 'lg2'
|
|
case 'h5':
|
|
return 'md2'
|
|
case 'h6':
|
|
return 'xs2'
|
|
default:
|
|
return 'semibold'
|
|
}
|
|
})
|
|
|
|
// Margin-bottom
|
|
const resolvedspacing = computed(() => {
|
|
switch (props.as) {
|
|
case 'h1':
|
|
return 'space-6'
|
|
case 'h2':
|
|
return 'space-6'
|
|
case 'h3':
|
|
return 'space-6'
|
|
case 'h4':
|
|
return 'space-6'
|
|
case 'h5':
|
|
return 'space-6'
|
|
case 'h6':
|
|
return 'space-6'
|
|
default:
|
|
return 'space-6'
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ds-heading {
|
|
&--roboto { font-family: var(--font-roboto); }
|
|
&--barlow { font-family: var(--font-barlow); }
|
|
&--brandon { font-family: var(--font-brandon); }
|
|
line-height: var(--lh-tight);
|
|
letter-spacing: var(--ls-tight);
|
|
margin: 0;
|
|
font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
|
|
font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */
|
|
|
|
&--xs { font-size: var(--title-xs); }
|
|
&--xs2 { font-size: var(--title-xs2); }
|
|
&--sm { font-size: var(--title-sm); }
|
|
&--md { font-size: var(--title-md); }
|
|
&--md2 { font-size: var(--title-md2); }
|
|
&--lg { font-size: var(--title-lg); }
|
|
&--lg2 { font-size: var(--title-lg2); }
|
|
&--xl { font-size: var(--title-xl); }
|
|
&--2xl { font-size: var(--title-2xl); }
|
|
|
|
&--extralight { font-weight: var(--fw-extralight); }
|
|
&--light { font-weight: var(--fw-light); }
|
|
&--regular { font-weight: var(--fw-regular); }
|
|
&--medium { font-weight: var(--fw-medium); }
|
|
&--semibold { font-weight: var(--fw-semibold); }
|
|
&--bold { font-weight: var(--fw-bold); }
|
|
&--extrabold { font-weight: var(--fw-extrabold); }
|
|
&--black { font-weight: var(--fw-black); }
|
|
|
|
&--space-48 { margin-bottom: var(--sp-48); }
|
|
&--space-40 { margin-bottom: var(--sp-40); }
|
|
&--space-32 { margin-bottom: var(--sp-32); }
|
|
&--space-24 { margin-bottom: var(--sp-24); }
|
|
&--space-20 { margin-bottom: var(--sp-20); }
|
|
&--space-16 { margin-bottom: var(--sp-16); }
|
|
&--space-6 { margin-bottom: var(--sp-6); }
|
|
|
|
//TONE
|
|
&--default { color: var(--c-text, #111); }
|
|
&--muted { color: var(--c-text-muted, #555); }
|
|
&--invert { color: var(--c-text-invert, #fff); }
|
|
&--brand_rouge { color: var(--c-brand_rouge); }
|
|
&--brand_rouge-weak { color: var(--c-brand_rouge-weak); }
|
|
&--success { color: var(--c-success); }
|
|
&--warning { color: var(--c-warning); }
|
|
&--danger { color: var(--c-danger); }
|
|
&--bleu_fonce { color: var(--c-bleu_fonce); }
|
|
&--bleu_clair { color: var(--c-bleu_clair); }
|
|
|
|
|
|
|
|
&--info { color: var(--c-info); }
|
|
|
|
|
|
|
|
}
|
|
</style> |