mirror of
https://github.com/n8n-io/n8n.git
synced 2026-10-12 02:19:43 +00:00
204 lines
3.6 KiB
Vue
204 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, useCssModule } from 'vue';
|
|
|
|
import type { TextAlign, TextColor, TextSize, TextStep } from '../../types/text';
|
|
|
|
interface TextProps {
|
|
bold?: boolean;
|
|
size?: TextSize;
|
|
step?: TextStep;
|
|
// @TODO Tech debt - property value should be updated to match token names (text-shade-2 instead of text-dark for example)
|
|
color?: TextColor;
|
|
align?: TextAlign;
|
|
compact?: boolean;
|
|
tag?: string;
|
|
}
|
|
|
|
defineOptions({ name: 'N8nText' });
|
|
const props = withDefaults(defineProps<TextProps>(), {
|
|
bold: false,
|
|
size: 'medium',
|
|
compact: false,
|
|
tag: 'span',
|
|
});
|
|
|
|
const $style = useCssModule();
|
|
const classes = computed(() => {
|
|
const applied: string[] = [];
|
|
if (props.align) {
|
|
applied.push(`align-${props.align}`);
|
|
}
|
|
if (props.color) {
|
|
applied.push(props.color);
|
|
}
|
|
|
|
if (props.compact) {
|
|
applied.push('compact');
|
|
}
|
|
|
|
if (props.step) {
|
|
applied.push(`step-${props.step}`);
|
|
} else {
|
|
applied.push(`size-${props.size}`);
|
|
}
|
|
applied.push(props.bold ? 'bold' : 'regular');
|
|
|
|
return applied.map((c) => $style[c]);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="tag" :class="['n8n-text', ...classes]" v-bind="$attrs">
|
|
<slot></slot>
|
|
</component>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
.bold {
|
|
font-weight: var(--font-weight--medium);
|
|
}
|
|
|
|
.regular {
|
|
font-weight: var(--font-weight--regular);
|
|
}
|
|
|
|
.size-xlarge {
|
|
font-size: var(--font-size--xl);
|
|
line-height: var(--line-height--xl);
|
|
}
|
|
|
|
.size-large {
|
|
font-size: var(--font-size--md);
|
|
line-height: var(--line-height--xl);
|
|
}
|
|
|
|
.size-medium {
|
|
font-size: var(--font-size--sm);
|
|
line-height: var(--line-height--lg);
|
|
}
|
|
|
|
.size-small {
|
|
font-size: var(--font-size--2xs);
|
|
line-height: var(--line-height--lg);
|
|
}
|
|
|
|
.size-xsmall {
|
|
font-size: var(--font-size--3xs);
|
|
line-height: var(--line-height--sm);
|
|
}
|
|
|
|
.step-4xs {
|
|
font-size: var(--font-size--4xs);
|
|
line-height: var(--line-height--xs);
|
|
letter-spacing: var(--letter-spacing--wider);
|
|
}
|
|
|
|
.step-3xs {
|
|
font-size: var(--font-size--3xs);
|
|
line-height: var(--line-height--sm);
|
|
letter-spacing: var(--letter-spacing--wider);
|
|
}
|
|
|
|
.step-2xs {
|
|
font-size: var(--font-size--2xs);
|
|
line-height: var(--line-height--md);
|
|
letter-spacing: var(--letter-spacing--normal);
|
|
}
|
|
|
|
.step-xs {
|
|
font-size: var(--font-size--xs);
|
|
line-height: var(--line-height--md);
|
|
letter-spacing: var(--letter-spacing--normal);
|
|
}
|
|
|
|
.step-sm {
|
|
font-size: var(--font-size--sm);
|
|
line-height: var(--line-height--lg);
|
|
letter-spacing: var(--letter-spacing--normal);
|
|
}
|
|
|
|
.step-md {
|
|
font-size: var(--font-size--md);
|
|
line-height: var(--line-height--lg);
|
|
letter-spacing: var(--letter-spacing--normal);
|
|
}
|
|
|
|
.step-lg {
|
|
font-size: var(--font-size--lg);
|
|
line-height: var(--line-height--xl);
|
|
letter-spacing: var(--letter-spacing--tight);
|
|
}
|
|
|
|
.step-xl {
|
|
font-size: var(--font-size--xl);
|
|
line-height: var(--line-height--xl);
|
|
letter-spacing: var(--letter-spacing--tight);
|
|
}
|
|
|
|
.step-2xl {
|
|
font-size: var(--font-size--2xl);
|
|
line-height: var(--line-height--xl);
|
|
letter-spacing: var(--letter-spacing--tighter);
|
|
}
|
|
|
|
.compact {
|
|
line-height: 1;
|
|
}
|
|
|
|
.primary {
|
|
color: var(--color--primary);
|
|
}
|
|
|
|
.secondary {
|
|
color: var(--color--secondary);
|
|
}
|
|
|
|
.text-dark {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.text-base {
|
|
color: var(--text-color--subtle);
|
|
}
|
|
|
|
.text-light {
|
|
color: var(--text-color--subtler);
|
|
}
|
|
|
|
.text-xlight {
|
|
color: var(--color--text--tint-3);
|
|
}
|
|
|
|
.danger {
|
|
color: var(--color--text--danger);
|
|
}
|
|
|
|
.success {
|
|
color: var(--color--success);
|
|
}
|
|
|
|
.warning {
|
|
color: var(--color--warning);
|
|
}
|
|
|
|
.foreground-dark {
|
|
color: var(--color--foreground--shade-1);
|
|
}
|
|
|
|
.foreground-xdark {
|
|
color: var(--color--foreground--shade-2);
|
|
}
|
|
|
|
.align-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.align-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.align-center {
|
|
text-align: center;
|
|
}
|
|
</style>
|