Ropav

Surface ​

A surface is a background and nothing else — no padding, no radius, no border. It paints one of the theme's surface fills together with the foreground colour meant to be read on it, and tells its descendants which surface they are sitting on.

It is the layer under Card: a card is a surface with a shape. Reach for Surface directly when you want the colour relationship without the shape, and give it the rest with classes.

ts
import { Surface } from "ropav";

Weekly report

Open rate held steady across the last four sends.

variant
template
<Surface class="flex w-72 flex-col gap-2 rounded-2xl p-6">
  <Typography type="h4">Weekly report</Typography>
  <Typography color="muted" type="body-sm">
    Open rate held steady across the last four sends.
  </Typography>
</Surface>

Stepping back ​

default, secondary and tertiary step back one surface at a time, and which one to use depends on what is behind it: a surface on the page body wants default, a surface inside another wants the next one along.

Billing

Card ending 4242

Next charge on 1 October

surface-nesting.vue
vue
<script setup lang="ts">
import { Surface, Typography } from "ropav";
</script>

<template>
  <Surface class="outer">
    <Typography type="h4">Billing</Typography>

    <Surface class="middle" variant="secondary">
      <Typography type="body-sm">Card ending 4242</Typography>

      <Surface class="inner" variant="tertiary">
        <Typography color="muted" type="body-xs">Next charge on 1 October</Typography>
      </Surface>
    </Surface>
  </Surface>
</template>

<style scoped>
.outer {
  display: flex;
  width: 100%;
  max-width: var(--rp-container-sm);
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 3);
  border-radius: calc(var(--rp-radius) * 2);
  padding: calc(var(--rp-spacing) * 5);
}

.middle {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 2);
  border-radius: calc(var(--rp-radius) * 1.5);
  padding: calc(var(--rp-spacing) * 4);
}

.inner {
  border-radius: var(--rp-radius);
  padding: calc(var(--rp-spacing) * 3);
}
</style>

transparent is the fourth and is different in kind: it paints no fill at all, so it shows whatever is behind it. Use it when the element is only there for the spacing or the layout.

Accessibility ​

  • Under Forced Colors Mode a painted surface is given an outline. The mode flattens fills onto the page and strips shadows, so without one the surface stops having any shape and its contents sit loose on the page. It is an outline rather than a border so nothing shifts.
  • Anything sitting on a surface that may be see-through has to be built from tokens that hold their contrast against an unknown fill — see Translucent surfaces.

API ​

PropTypeDefaultDescription
variant"default" | "secondary" | "tertiary" | "transparent""default"Visual variant.

Slots: default.