Surfaces

Glass Surface

Deprecated: use Surface. GlassSurface is kept until the next major version.

Deprecated

GlassSurface is replaced by Surface and removed in the next major version. It still works and looks the same: it renders a Surface, keeps its glass* classes, and logs a [ca-ui] warning in development.

bunx @codeatlasdev/ui migrate --write src

<!-- before -->
<GlassSurface thickness="thick" tinted glowing>…</GlassSurface>

<!-- after -->
<Surface material="liquid" elevation={4} tone="brand" glow>…</Surface>

GlassSurface	Surface
`thickness="ultra-thin"` `"thin"` `"regular"` `"thick"` `"chrome"`	`elevation={1}` `{2}` `{3}` (default) `{4}` `{5}`
`tinted`	`tone="brand"`
`glowing`	`glow`
`refraction` (default `true`)	`material="liquid"`; `refraction={false}` is `material="glass"`
`class`, `style`, other attributes	unchanged (use `p` / `as` instead of a padding style)

GlassSurface followed the theme (<html data-style>) through its glass* classes, and drew the refraction layer when refraction was on. The codemod writes material="liquid" (or "glass"), so the result is glass in every theme, as the name promised.

Dynamic props (thickness={t}) are not rewritten by the codemod: map them by hand with the table above.