RTL

How RTL Works

• RTL is enabled by setting dir="rtl" on the document root or a workspace member container.
• Layout direction, spacing, and typography adapt automatically.
• Components do not require per-component RTL configuration.

Logical CSS Projects

All layouts in the design system use logical projects instead of physical directions. This allows layouts to flip automatically between LTR and RTL.

.card {
  padding-inline: 16px;
  margin-inline-start: 8px;
  inset-inline-end: 0;
}

RTL SCSS Mixin

When conditional styling is unavoidable, the design system provides an explicit RTL mixin. This keeps RTL logic localized and readable.

@use "@/design-system/scss/mixins/rtl" as rtl;

.element {
  margin-inline-start: 8px;

  @include rtl.rtl {
    margin-inline-start: 0;
    margin-inline-end: 8px;
  }
}

Typography in RTL

Typography automatically switches to the self-hosted Arabic font (Cairo) when the document language is Arabic (<html lang="ar">). Global styles swap the --ds-font-family-sans token itself, so the body, the app shell and data tables all follow without component-level overrides. English pages keep Inter and render any Arabic user data in Cairo.

body {
  font-family: tokens.$font-family-sans;
}

:root:lang(ar),
[data-theme]:lang(ar) {
  --ds-font-family-sans: #{tokens.$font-family-arabic};
}

RTL Rules

• Never use physical directional projects such as left / right.
• Always prefer logical projects and semantic alignment.
• Test every component in both LTR and RTL contexts.
• Treat RTL regressions as blocking issues.