Type Panel

👑Pioneer

Typed is the atomic container of the TechUI visual system.

It does not contain specific business logic; instead, it encapsulates TechUI's core color mapping mechanism. Upper-level components (such as Attention, Dialog, and Card) all call it to achieve a unified visual style.

Core Concepts

Before using Typed, please understand TechUI's two-dimensional visual coordinate system:

1. Type (Semantics): Determines the hue of the color (e.g., Primary Blue, Danger Red).
2. Tone: Determines the level variant of the color.

Tone System

The tone system in TechUI does not simply change transparency; instead, it directly calls pre-defined color scale variables from the theme system (Theme).

This means that tones such as Weak, Base, and Strong have independent color definitions within the theme (e.g., --primary-weak, --primary-base), ensuring color accuracy and coordination across different levels.

Tone	Variable Mapping Example	Visual Representation
Weak	var(--primary-weak)	Light/Auxiliary color. Calls the weak color variable defined in the theme, usually with high brightness or low saturation.
Base	var(--primary-base)	Standard color. Calls the standard base color variable defined in the theme.
Strong	var(--primary-strong)	Dark/Emphasis color. Calls the strong color variable defined in the theme, usually richer and deeper.
StrongInvert	(Composite Logic)	Strong background + Inverted text. Uses a dark/high-saturation background with text forced to white.
ExtremeInvert	(Special Calculation)	Extreme contrast. The background color undergoes special calculation to create the maximum contrast with the current environment.

Appearance Modes

Through the appearance attribute, the rendering form of the component can be completely changed.

Background Mode (background) - Default

Renders the complete container. Supports transparency, blur, and shadow configurations.

<template>
  <div class="demo-gap">
    <TuiTyped type="primary" tone="base">
      <h3>Base Tone</h3>
      <p>Standard tone.</p>
    </TuiTyped>

    <TuiTyped type="primary" tone="strong">
      <h3>Strong Tone</h3>
      <p>Deeper, more emphasized color.</p>
    </TuiTyped>
    
    <TuiTyped type="primary" tone="weak">
      <h3>Weak Tone</h3>
      <p>Lighter auxiliary color.</p>
    </TuiTyped>
  </div>
</template>

Line Mode (line)

Renders only one emphasis color line; the background is typically transparent. Used in conjunction with linePosition (top, right, bottom, left) and lineThickness.

<template>
  <div class="demo-gap">
    <TuiTyped appearance="line" type="primary" linePosition="left" :lineThickness="4">
      <p>Left-side highlight quote block</p>
    </TuiTyped>

    <TuiTyped appearance="line" type="success" linePosition="top" :lineThickness="2">
      <p>Top status indicator bar</p>
    </TuiTyped>
  </div>
</template>

Text Mode (text)

Changes only the color of the text inside the container, removing all backgrounds and borders. In this mode, the text color directly follows the Tone setting (e.g., when tone="weak", the text color is --primary-weak).

<TuiTyped appearance="text" type="info" tone="strong">
  This text uses the Strong variant color of the Info type.
</TuiTyped>

Visual Effects

In appearance="background" mode, more advanced visual customization is supported.

Smart Shadow (Shadow)

Controls the intensity or strategy of the shadow via shadowColor.

• Intensity Levels: weakest, weaker, weak (default), base, strong, stronger, strongest.
• Match Mode: match. The shadow color automatically picks up the current type color (e.g., a red panel produces a red glow).

<template>
  <TuiTyped type="default" hasShadow shadowColor="base">Base Shadow</TuiTyped>
  
  <TuiTyped type="primary" tone="strong" hasShadow shadowColor="match">
    Glowing Button Style
  </TuiTyped>
</template>

Glassmorphism

• transparent: Enables background semi-transparency.
• backgroundBlur: Enables background Gaussian blur (Backdrop Filter).

<TuiTyped type="primary" tone="base" :transparent="true" :backgroundBlur="true">
  <p>Content behind the background will be blurred, presenting a frosted glass texture.</p>
</TuiTyped>

Custom Colors

When preset semantic types cannot meet requirements, customColor supports passing custom values.

Single Color Mode

Pass a CSS color string. The component will automatically calculate all variants such as Base, Strong, and Invert for that color.

<TuiTyped customColor="#722ed1" tone="strongInvert">
  Purple Strong Invert
</TuiTyped>

Gradient/Multi-color Mode

Pass an array of colors. The component will apply gradient logic based on the appearance mode.

<TuiTyped :customColor="['#00c6fb', '#005bea']" tone="strong">
  Gradient Background
</TuiTyped>

API Reference

Props

Property	Type	Default	Description
appearance	String	'background'	Core Appearance. Options: background, line, text, none.
type	String	'default'	Semantic Type. Options: default, invert, primary, success, warning, danger, info, emphasis.
tone	String	'base'	Visual Tone. Options: weak, base, strong, strongInvert, extremeInvert.
customColor	String/Array	null	Custom color. Supports CSS color values or gradient arrays.

Background Parameters (appearance='background')

Property	Type	Default	Description
transparent	Boolean	false	Whether to enable semi-transparency.
backgroundBlur	Boolean	true	Whether to enable background blur (requires transparent).
hasShadow	Boolean	true	Whether to display a shadow.
shadowColor	String	'weak'	Shadow strategy. Options: weakest...strongest, match (matches type color).

Line Parameters (appearance='line')

Property	Type	Default	Description
linePosition	String	'top'	Line position: top, right, bottom, left.
lineThickness	Number	-	Line thickness (px).

Slots

Slot Name	Description
default	Container content.