Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danielitoCode/compose_svelted/llms.txt

Use this file to discover all available pages before exploring further.

Surface and Text are the two foundational building blocks of every Compose Svelted layout. Surface establishes a themed background region, while Text renders content with the typographic scale defined by Material 3. Both components are fully independent of Tailwind and rely on CSS custom properties set by ComposeTheme.

​
Surface

Surface maps directly to the Material 3 surface concept: a bounded area whose background color is driven by a ColorToken from the active theme. It renders as a block-level <div> and accepts a Modifier for sizing, padding, and any other layout constraints.

​
Props

​
modifier
Modifier
default:"Modifier.empty()"
A Modifier instance that controls layout, size, padding, and other inline styles applied to the surface container.
​
color
ColorToken
default:"'surface'"
A ColorToken key from ColorScheme. Resolves to the matching --md-sys-color-* CSS variable at runtime. Defaults to "surface", matching the M3 surface role.

​
Slots

SlotDescription
defaultAny content you want to place inside the surface container.

​
ColorToken reference

ColorToken is a union of all keys defined in ColorScheme. The full set of available tokens is: 
import { ColorScheme } from '@danielito1996/compose-svelted';

ColorScheme.Primary          // "primary"
ColorScheme.OnPrimary        // "onPrimary"
ColorScheme.Secondary        // "secondary"
ColorScheme.OnSecondary      // "onSecondary"
ColorScheme.Background       // "background"
ColorScheme.OnBackground     // "onBackground"
ColorScheme.Surface          // "surface"
ColorScheme.OnSurface        // "onSurface"
ColorScheme.SurfaceVariant   // "surfaceVariant"
ColorScheme.OnSurfaceVariant // "onSurfaceVariant"
ColorScheme.Tertiary         // "tertiary"
ColorScheme.OnTertiary       // "onTertiary"
ColorScheme.Outline          // "outline"
ColorScheme.Error            // "error"
ColorScheme.OnError          // "onError"
You can pass the string literal directly (color="primary") or use the ColorScheme constants for type safety.

​
Basic example

<script>
  import { Surface, Text, Modifier } from '@danielito1996/compose-svelted';
</script>

<Surface color="surface" modifier={Modifier.padding(16)}>
  <Text>Content inside a surface</Text>
</Surface>

​
Nested surfaces with distinct color roles

Material 3 encourages layering surfaces with complementary roles. Use ColorScheme constants to reference semantic tokens: 
<script>
  import {
    Surface, Text, Column, Modifier,
    ColorScheme, Arrangement
  } from '@danielito1996/compose-svelted';
</script>

<Surface
  color={ColorScheme.Background}
  modifier={Modifier.fillMaxSize().padding(24)}
>
  <Column verticalArrangement={Arrangement.spacedBy(16)}>
    <Surface
      color={ColorScheme.Surface}
      modifier={Modifier.fillMaxWidth().padding(16)}
    >
      <Text textStyle="titleMedium">Card-like surface</Text>
      <Text textStyle="bodyMedium">
        Nested inside a background-colored outer surface.
      </Text>
    </Surface>

    <Surface
      color={ColorScheme.SurfaceVariant}
      modifier={Modifier.fillMaxWidth().padding(16)}
    >
      <Text color={ColorScheme.OnSurfaceVariant} textStyle="bodySmall">
        Surface variant for de-emphasised regions.
      </Text>
    </Surface>
  </Column>
</Surface>
Surface does not apply any border-radius by default. Use a Card component when you need rounded corners and elevation — Card is built on top of Surface and adds those styles automatically.

​
Text

Text renders a Material 3 paragraph element (<p>) styled by the theme’s typographic scale. Every visual property — font size, weight, line-height, letter-spacing — is resolved from a TextStyleToken through CSS custom properties, so it automatically adapts when the active theme changes.

​
Props

​
modifier
Modifier
default:"Modifier.empty()"
A Modifier instance for layout, sizing, and additional inline styles on the text element.
​
textStyle
TextStyleToken
default:"'bodyMedium'"
Selects the typographic style to apply. Must be one of the TextStyleToken values listed below.
​
color
ColorToken | string
default:"'onSurface'"
Sets the text color. Accepts a ColorToken (resolved against the active theme) or any valid CSS color string such as "#ff0000" or "rgb(0,128,255)".

​
Slots

SlotDescription
defaultThe text content to render. Can contain inline HTML elements.

​
TextStyleToken values

The full set of tokens available from TextStyle:
TokenTextStyle constant
"displayLarge"TextStyle.DisplayLarge
"displayMedium"TextStyle.DisplayMedium
"displaySmall"TextStyle.DisplaySmall
"headlineLarge"TextStyle.HeadlineLarge
"headlineMedium"TextStyle.HeadlineMedium
"headlineSmall"TextStyle.HeadlineSmall
"titleLarge"TextStyle.TitleLarge
"titleMedium"TextStyle.TitleMedium
"titleSmall"TextStyle.TitleSmall
"bodyLarge"TextStyle.BodyLarge
"bodyMedium"TextStyle.BodyMedium
"bodySmall"TextStyle.BodySmall
"labelLarge"TextStyle.LabelLarge
"labelMedium"TextStyle.LabelMedium
"labelSmall"TextStyle.LabelSmall

​
Basic examples

<script>
  import { Text } from '@danielito1996/compose-svelted';
</script>

<Text textStyle="headlineMedium" color="primary">Welcome</Text>
<Text textStyle="bodyLarge">Description text.</Text>

​
Using TextStyle constants

<script>
  import { Text, TextStyle, ColorScheme } from '@danielito1996/compose-svelted';
</script>

<Text textStyle={TextStyle.DisplaySmall} color={ColorScheme.Primary}>
  Big headline
</Text>

<Text textStyle={TextStyle.BodyMedium} color={ColorScheme.OnSurface}>
  Regular body copy using the theme's surface foreground color.
</Text>

<Text textStyle={TextStyle.LabelSmall} color={ColorScheme.OnSurfaceVariant}>
  Quiet label text for secondary information.
</Text>

​
Passing a raw CSS color

When a design requires a one-off color outside the theme’s token set, pass a CSS string directly: 
<Text textStyle="titleSmall" color="#6750A4">
  Custom hex color
</Text>

<Text textStyle="bodySmall" color="rgb(103, 80, 164)">
  Custom RGB color
</Text>
Prefer ColorToken values over raw CSS strings wherever possible. Theme tokens automatically adapt when the user switches between light and dark themes, while raw strings remain fixed.

​
Full typographic scale demonstration

<script>
  import { Column, Text, TextStyle, Arrangement, Modifier } from '@danielito1996/compose-svelted';
</script>

<Column
  modifier={Modifier.padding(24)}
  verticalArrangement={Arrangement.spacedBy(8)}
>
  <Text textStyle={TextStyle.DisplayLarge}>Display Large</Text>
  <Text textStyle={TextStyle.DisplayMedium}>Display Medium</Text>
  <Text textStyle={TextStyle.DisplaySmall}>Display Small</Text>
  <Text textStyle={TextStyle.HeadlineLarge}>Headline Large</Text>
  <Text textStyle={TextStyle.HeadlineMedium}>Headline Medium</Text>
  <Text textStyle={TextStyle.HeadlineSmall}>Headline Small</Text>
  <Text textStyle={TextStyle.TitleLarge}>Title Large</Text>
  <Text textStyle={TextStyle.TitleMedium}>Title Medium</Text>
  <Text textStyle={TextStyle.TitleSmall}>Title Small</Text>
  <Text textStyle={TextStyle.BodyLarge}>Body Large</Text>
  <Text textStyle={TextStyle.BodyMedium}>Body Medium</Text>
  <Text textStyle={TextStyle.BodySmall}>Body Small</Text>
  <Text textStyle={TextStyle.LabelLarge}>Label Large</Text>
  <Text textStyle={TextStyle.LabelMedium}>Label Medium</Text>
  <Text textStyle={TextStyle.LabelSmall}>Label Small</Text>
</Column>

Build docs developers (and LLMs) love

Get started for freeTalk to us