Migration Guide

This guide lists removed or deprecated class names, variants, and markup patterns in recent @ringover/styles releases (currently documented against 3.26.0). Use it when upgrading from older Ringobook examples or legacy product markup.

Component pages also call out local deprecations; this page is the central reference.

Quick reference

Area	Removed or deprecated	Use instead
Close button	`.ro-close`	Ghost icon `.ro-btn` — see Close Button
Cards (pre-3.20)	`.ro-shadow-`, `.ro-bg-`, colored `.ro-border-*`, `.ro-card-btn`	Redesigned Card API
Form field wrapper	`.ro-form-control`, `.ro-label`, `.ro-form-error-message`	`.ro-field`, `.ro-field-label`, `.ro-field-error` — see Form Layouts
Option groups	Generic `.ro-fieldset` styling	`.ro-radio-group`, `.ro-checkbox-group`
Input variant	`.ro-variant-light`	`.ro-variant-grey` — see Inputs
Alerts	`.ro-color-scheme-product`, `.ro-color-scheme-info`	`success`, `warning`, or `danger` — see Alerts
Badges	`info`, `success`, `warning`, `white` color schemes	`product`, `danger`, or status variants — see Badge
Dropdown items	`info`, `success`, `warning` item schemes	`product`, `danger`, or default — see Dropdown
Buttons	`data-ro-variant`, `data-ro-color-scheme`	`.ro-variant-`, `.ro-color-scheme-` — see Buttons
Avatars	`data-ro-size`, `product` / `danger` color schemes	`.ro-size-*` classes (see size table); dynamic schemes for initials — see Avatars
Chips	`outlined`, `muted`, `muted-outlined`; `info`, `white`; `--ro-chip-rgb`	Default filled chips; supported schemes below — see Chips
Chips & others	`data-ro-*` attributes	Equivalent `.ro-*` CSS classes
Meet Us theme (CDN)	`meet.css` filename	`meet-us` on `data-ro-theme`; npm `@ringover/styles/themes/meet-us` — see Setup
Icons	Renamed icon classes	Replacement names in Icons

Removed classes

`.ro-close`

The dedicated close-button class was removed. Use a small ghost icon button:

<button class="ro-btn ro-variant-ghost ro-shape-icon ro-size-sm" aria-label="Close">
  <i class="ro-icon ro-icon-x-small"></i>
</button>

On colored surfaces, add .ro-color-scheme-inverted. See Close Button.

Cards (redesign, v3.20.0)

The card component was rebuilt. The old utility modifiers on .ro-card are no longer shipped.

Removed modifiers

Colored shadows: .ro-shadow-product, .ro-shadow-info, .ro-shadow-success, .ro-shadow-warning, .ro-shadow-danger
Background utilities: .ro-bg-product, .ro-bg-info, .ro-bg-success, .ro-bg-warning, .ro-bg-danger, .ro-bg-grey-light, .ro-bg-grey-dark, .ro-bg-translucent
Colored borders: .ro-border-product, .ro-border-product-light, .ro-border-danger, and legacy semantic border colors
Floating action: .ro-card-btn

Current structure

Use semantic sub-elements and variants:

<article class="ro-card ro-clickable">
  <div class="ro-card-media ro-size-md">
    <img src="…" alt="…" />
  </div>
  <div class="ro-card-content">
    <header class="ro-card-header">…</header>
    <p class="ro-card-body">…</p>
    <footer class="ro-card-footer">…</footer>
  </div>
</article>

Class	Purpose
`.ro-dir-horizontal`	Side-by-side media and content
`.ro-variant-ghost`	Transparent border; light hover background
`.ro-clickable`	Pointer cursor and hover shadow
`.active`	Selected state (accent border)
`.ro-card-media.ro-size-sm` / `md` / `lg`	Media dimensions

See Cards for full examples.

Forms

Field wrapper (v3.25.0)

Prefer the ro-field layout over legacy form-control markup:

Legacy	Current
`.ro-form-control`	`.ro-field`
`.ro-label` (direct child)	`.ro-field-label` inside `.ro-field-header`
`.ro-form-error-message`	`.ro-field-error`

Legacy class names remain supported for backward compatibility.

Option groups

Use ro-radio-group or ro-checkbox-group on <fieldset> with .ro-field-legend. Style individual options with .ro-input-option.

Input variant

Replace .ro-variant-light with .ro-variant-grey.

Color schemes

Several components dropped generic semantic schemes (info, and in some cases success / warning) in favor of a smaller, product-specific set.

Alerts

Deprecated	Supported
`product`, `info`	`success`, `warning`, `danger`

Badges

Deprecated	Supported
`info`, `success`, `warning`, `white`	Default (neutral), `product`, `danger`, and status: `available`, `incall`, `snooze`, `disconnected` with `.ro-variant-status`

Deprecated	Supported
`info`, `success`, `warning` on `.ro-dropdown-item`	`product`, `danger`, or default

Buttons

Apply variant and color-scheme classes on .ro-btn. On .ro-btn-group, the same classes cascade to every child button.

Supported variants

Variant	Class	Description
Solid	(default)	Filled background; no variant class needed
Outlined	`.ro-variant-outlined`	Border with transparent fill
Dashed	`.ro-variant-dashed`	Dashed border (v3.25+)
Muted	`.ro-variant-muted`	Soft filled background
Muted outlined	`.ro-variant-muted-outlined`	Soft border style
Ghost	`.ro-variant-ghost`	Transparent until hover/focus
Link	`.ro-variant-link`	Text-only button
White	`.ro-variant-white`	Light surface variant (not a color scheme)
Search	`.ro-variant-search`	Search-field styling

<!-- Before -->
<button class="ro-btn" data-ro-variant="outlined" data-ro-color-scheme="product">Save</button>

<!-- After -->
<button class="ro-btn ro-variant-outlined ro-color-scheme-product">Save</button>

Supported color schemes

Scheme	Class	Description
Neutral	(default)	Standard component colors
Product	`.ro-color-scheme-product`	Primary accent
Danger	`.ro-color-scheme-danger`	Destructive actions
Black	`.ro-color-scheme-black`	Dark fill
White	`.ro-color-scheme-white`	Light fill
Inverted	`.ro-color-scheme-inverted`	Adapts to light/dark mode context
Glass	`.ro-color-scheme-glass`	Frosted glass effect (v3.21+)
AI	`.ro-color-scheme-ai`	Gradient AI styling; pairs with `.ro-variant-outlined`

See Buttons for examples.

Chips

Chips use a single filled style — there is no .ro-variant-outlined / .ro-variant-muted on .ro-chip (those variants apply to buttons only).

Supported interaction

Pattern	Class	Description
Default	`.ro-chip`	Static label or filter
Toggleable	`.ro-toggleable` + `.active`	Selectable chip; shows `.ro-chip-active-icon` when active

Supported color schemes

Category	Schemes
Core	(default), `product`, `light`
Semantic	`success`, `warning`, `danger`, `favorite`, `inverted`
Special	`glass`, `ai`
Business	`incoming`, `outgoing`, `missed`, `voicemail`, `snooze`
Dynamic	`grey`, `blue`, `green`, `yellow`, `orange`, `red`, `pink`, `purple`, `brown`

Apply with .ro-color-scheme-{name} (for example .ro-chip.ro-color-scheme-success).

Removed variants and colors

Removed	Use instead
Variants: `outlined`, `muted`, `muted-outlined` on `.ro-chip`	Default filled chip; `.ro-toggleable` for selection
Colors: `info`, `white`	`product`, `light`, or a semantic/dynamic scheme

Custom colors

Deprecated	Current
Inline `--ro-chip-rgb`	`--ro-chip-color-scheme` (hex, `rgb()`, `hsl()`, or CSS variable)

<!-- Before -->
<div class="ro-chip" style="--ro-chip-rgb: 105, 5, 120, 0.2">…</div>

<!-- After -->
<div class="ro-chip" style="--ro-chip-color-scheme: #690578">…</div>

See Chips for examples.

Avatars

Size migration

Current sizes (3.18.0+)

Replace data-ro-size with the matching .ro-size-* class:

Size token	Class	Deprecated attribute	Side length
`2xs`	`.ro-size-2xs`	`data-ro-size="2xs"`	20px
`xs`	`.ro-size-xs`	`data-ro-size="xs"`	24px
`sm`	`.ro-size-sm`	`data-ro-size="sm"`	32px
`md`	(default) or `.ro-size-md`	`data-ro-size="md"` or omitted	40px
`lg`	`.ro-size-lg`	`data-ro-size="lg"`	48px
`xl`	`.ro-size-xl`	`data-ro-size="xl"`	64px
`2xl`	`.ro-size-2xl`	`data-ro-size="2xl"`	108px

<!-- Before (attribute API) -->
<div class="ro-avatar ro-shape-circle" data-ro-size="lg">
  <img class="ro-avatar_img" src="…" alt="…" />
</div>

<!-- After (class API) -->
<div class="ro-avatar ro-shape-circle ro-size-lg">
  <img class="ro-avatar_img" src="…" alt="…" />
</div>

Equivalence before 3.18.0

Avatar size tokens were remapped in @ringover/styles 3.18.0 (2026-05-05; @ringover/ringo-ui 0.10.0). The same token name no longer yields the same side length. When upgrading from 3.17.x or older (including legacy Ringobook examples), pick the 3.18.0+ token that matches the pixel size you need, not the old token name.

Pre-3.18.0 token	Side length	3.18.0+ token	Side length
`xs`	16px	—	(no equivalent; closest is `2xs` at 20px)
`sm`	20px	`2xs`	20px
`md`	24px	`xs`	24px
`lg`	32px	`sm`	32px
`xl`	40px	`md`	40px
`2xl`	48px	`lg`	48px
`3xl`	64px	`xl`	64px
`4xl`	80px	—	(no equivalent; closest is `2xl` at 108px)
`5xl`	100px	`2xl`	108px (closest)

<!-- Pre-3.18.0: xl = 40px -->
<div class="ro-avatar ro-shape-circle" data-ro-size="xl">…</div>

<!-- 3.18.0+: same 40px side length → md -->
<div class="ro-avatar ro-shape-circle ro-size-md">…</div>

Tokens 3xl, 4xl, and 5xl are removed in 3.18.0. Map 3xl (64px) to xl, and 4xl / 5xl to 2xl (108px) when you need the largest supported size.

Other avatar attributes

Deprecated attribute	Class equivalent
`data-ro-border`, `data-ro-border="1"`	`.ro-border` or `.ro-border-basic`
`data-ro-border="2"`	`.ro-border-2` or `.ro-border-outlined`
`data-ro-fit="contain"`	`.ro-fit-contain`
`data-ro-fit="cover"`	`.ro-fit-cover`
`data-ro-color-scheme="{name}"`	`.ro-color-scheme-{name}` (initials palette)

Color schemes

product / danger / info / success / warning for border tinting are removed. Borders use accent tokens via .ro-border / .ro-border-2.
For initials backgrounds, use dynamic schemes: grey, blue, green, yellow, orange, red, pink, purple, brown.

See Avatars for examples.

`data-ro-*` attributes

Class-based APIs are preferred over data-ro-* attributes where both exist:

Attribute	Class equivalent
`data-ro-size` on avatars	`.ro-size-*` — see Avatar sizes
`data-ro-size` on badges	`.ro-size-*`
`data-ro-variant`, `data-ro-color-scheme` on buttons	`.ro-variant-`, `.ro-color-scheme-` — see Buttons
`data-ro-color-scheme` on chips	`.ro-color-scheme-*` — see Chips
`data-ro-dir="horizontal"`	`.ro-dir-horizontal`
`data-ro-border`, `data-ro-fit` on avatars	`.ro-border-`, `.ro-fit-` — see Other avatar attributes

Web Components (for example <ro-dropdown>) may still use data-ro-placement and similar attributes where no class API exists.

Themes

Context	Old	Current
CDN theme file	`meet.css`	Still served as `meet.css` for backward compatibility
`data-ro-theme` / npm import	`meet` (informal)	`meet-us` — `@ringover/styles/themes/meet-us`

See Setup for CDN and npm theme loading.

Icons

When an icon is renamed, the old class remains as a deprecated alias until a future major release. Browse replacements in the Icons gallery under Deprecated.

Need help?

Package source and changelog: design-system-factory — @ringover/styles CHANGELOG.md
Playground HTML: vanilla examples in design-system-factory/src/views/
Setup: Installation guide

Migration Guide

Quick reference

Removed classes

.ro-close

Cards (redesign, v3.20.0)

Removed modifiers

Current structure

Forms

Field wrapper (v3.25.0)

Option groups

Input variant

Color schemes

Alerts

Badges

Dropdown menu items

Buttons

Supported variants

Supported color schemes

Chips

Supported interaction

Supported color schemes

Removed variants and colors

Custom colors

Avatars

Size migration

Current sizes (3.18.0+)

Equivalence before 3.18.0

Other avatar attributes

Color schemes

data-ro-* attributes

Themes

Icons

Need help?

`.ro-close`

`data-ro-*` attributes