Skip to content

Commit d5b7637

Browse files
shuuji3danielroe
shuuji3
and
danielroe
authored
style: replace physical RTL classes with logical ones (#404)
Co-authored-by: Daniel Roe <daniel@roe.dev>
1 parent f80f5a5 commit d5b7637

15 files changed

Lines changed: 55 additions & 65 deletions

‎CONTRIBUTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ We've added some `UnoCSS` utilities styles to help you with that:
232232
- Do not use `rtl-` classes, such as `rtl-left-0`.
233233
- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`.
234234
- For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
235-
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
235+
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-is-5`.
236236
- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
237237

238238
## Localization (i18n)

‎app/assets/main.css‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ button {
156156
.skip-link {
157157
position: fixed;
158158
top: -100%;
159-
left: 0;
159+
inset-inline-start: 0;
160160
padding: 0.5rem 1rem;
161161
background: var(--fg);
162162
color: var(--bg);
@@ -165,11 +165,6 @@ button {
165165
transition: top 0.2s ease;
166166
}
167167

168-
html[dir='rtl'] .skip-link {
169-
left: unset;
170-
right: 0;
171-
}
172-
173168
.skip-link:hover {
174169
color: var(--bg);
175170
text-decoration: underline;
@@ -298,7 +293,7 @@ html.light .shiki span {
298293
.readme-content ul,
299294
.readme-content ol {
300295
margin: 1rem 0;
301-
padding-left: 1.5rem;
296+
padding-inline-start: 1.5rem;
302297
}
303298

304299
.readme-content ul {
@@ -319,17 +314,18 @@ html.light .shiki span {
319314
}
320315

321316
.readme-content blockquote {
322-
border-left: 2px solid var(--border);
323-
padding-left: 1rem;
317+
border-inline-start: 2px solid var(--border);
318+
padding-inline-start: 1rem;
324319
margin: 1.5rem 0;
325320
color: var(--fg-subtle);
326321
font-style: italic;
327322
}
328323

329324
/* GitHub-style callouts/alerts */
330325
.readme-content blockquote[data-callout] {
331-
border-left-width: 3px;
332-
padding: 1rem 1rem 1rem 1.25rem;
326+
border-inline-start-width: 3px;
327+
padding: 1rem;
328+
padding-inline-start: 1.25rem;
333329
background: var(--bg-subtle);
334330
font-style: normal;
335331
color: var(--fg-subtle);
@@ -344,7 +340,7 @@ html.light .shiki span {
344340
text-transform: uppercase;
345341
letter-spacing: 0.05em;
346342
margin-bottom: 0.5rem;
347-
padding-left: 1.5rem;
343+
padding-inline-start: 1.5rem;
348344
}
349345

350346
.readme-content blockquote[data-callout]::after {
@@ -365,7 +361,7 @@ html.light .shiki span {
365361

366362
/* Note - blue */
367363
.readme-content blockquote[data-callout='note'] {
368-
border-left-color: var(--syntax-str);
364+
border-inline-start-color: var(--syntax-str);
369365
background: rgba(59, 130, 246, 0.05);
370366
}
371367
.readme-content blockquote[data-callout='note']::before {
@@ -380,7 +376,7 @@ html.light .shiki span {
380376

381377
/* Tip - green */
382378
.readme-content blockquote[data-callout='tip'] {
383-
border-left-color: #22c55e;
379+
border-inline-start-color: #22c55e;
384380
background: rgba(34, 197, 94, 0.05);
385381
}
386382
.readme-content blockquote[data-callout='tip']::before {
@@ -395,7 +391,7 @@ html.light .shiki span {
395391

396392
/* Important - purple */
397393
.readme-content blockquote[data-callout='important'] {
398-
border-left-color: var(--syntax-fn);
394+
border-inline-start-color: var(--syntax-fn);
399395
background: rgba(168, 85, 247, 0.05);
400396
}
401397
.readme-content blockquote[data-callout='important']::before {
@@ -410,7 +406,7 @@ html.light .shiki span {
410406

411407
/* Warning - yellow/orange */
412408
.readme-content blockquote[data-callout='warning'] {
413-
border-left-color: #eab308;
409+
border-inline-start-color: #eab308;
414410
background: rgba(234, 179, 8, 0.05);
415411
}
416412
.readme-content blockquote[data-callout='warning']::before {
@@ -425,7 +421,7 @@ html.light .shiki span {
425421

426422
/* Caution - red */
427423
.readme-content blockquote[data-callout='caution'] {
428-
border-left-color: #ef4444;
424+
border-inline-start-color: #ef4444;
429425
background: rgba(239, 68, 68, 0.05);
430426
}
431427
.readme-content blockquote[data-callout='caution']::before {
@@ -452,7 +448,7 @@ html.light .shiki span {
452448
.readme-content td {
453449
border: 1px solid var(--border);
454450
padding: 0.75rem 1rem;
455-
text-align: left;
451+
text-align: start;
456452
}
457453

458454
.readme-content th {

‎app/components/AppTooltip.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ const isVisible = shallowRef(false)
1010
const tooltipId = useId()
1111
1212
const positionClasses: Record<string, string> = {
13-
top: 'bottom-full left-1/2 -translate-x-1/2 mb-1',
14-
bottom: 'top-full left-0 mt-1',
15-
left: 'right-full top-1/2 -translate-y-1/2 mr-2',
16-
right: 'left-full top-1/2 -translate-y-1/2 ml-2',
13+
top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
14+
bottom: 'top-full inset-is-0 mt-1',
15+
left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
16+
right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
1717
}
1818
1919
const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])

‎app/components/ColumnPicker.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function handleReset() {
9393
v-if="isOpen"
9494
ref="menuRef"
9595
:id="menuId"
96-
class="absolute right-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
96+
class="absolute inset-ie-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
9797
role="group"
9898
:aria-label="$t('filters.columns.show')"
9999
>
@@ -144,7 +144,7 @@ function handleReset() {
144144
<div class="border-t border-border py-1">
145145
<button
146146
type="button"
147-
class="w-full px-3 py-2 text-left text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
147+
class="w-full px-3 py-2 text-start text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
148148
@click="handleReset"
149149
>
150150
{{ $t('filters.columns.reset') }}

‎app/components/FilterChips.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const emit = defineEmits<{
2121
}}</span>
2222
<button
2323
type="button"
24-
class="ml-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
24+
class="ms-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
2525
:aria-label="$t('filters.remove_filter', { label: chip.label })"
2626
@click="emit('remove', chip)"
2727
>

‎app/components/FilterPanel.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
171171
<!-- Collapsed header -->
172172
<button
173173
type="button"
174-
class="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
174+
class="w-full flex items-center gap-3 px-4 py-3 text-start hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
175175
:aria-expanded="isExpanded"
176176
@click="isExpanded = !isExpanded"
177177
>
@@ -183,7 +183,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
183183
{{ filterSummary }}
184184
</span>
185185
<span
186-
class="i-carbon-chevron-down w-4 h-4 text-fg-subtle transition-transform duration-200 shrink-0 ml-auto"
186+
class="i-carbon-chevron-down w-4 h-4 text-fg-subtle transition-transform duration-200 shrink-0 ms-auto"
187187
:class="{ 'rotate-180': isExpanded }"
188188
aria-hidden="true"
189189
/>

‎app/components/OrgTeamsPanel.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -406,7 +406,7 @@ watch(lastExecutionTime, () => {
406406
<div
407407
v-if="expandedTeams.has(teamName)"
408408
:id="`team-${teamName}-members`"
409-
class="pl-9 pr-3 pb-3"
409+
class="ps-9 pe-3 pb-3"
410410
>
411411
<!-- Members list -->
412412
<ul
@@ -417,7 +417,7 @@ watch(lastExecutionTime, () => {
417417
<li
418418
v-for="user in teamUsers[teamName]"
419419
:key="user"
420-
class="flex items-center justify-start py-1 pl-2 pr-1 rounded hover:bg-bg-subtle transition-colors duration-200"
420+
class="flex items-center justify-start py-1 ps-2 pe-1 rounded hover:bg-bg-subtle transition-colors duration-200"
421421
>
422422
<NuxtLink
423423
:to="{ name: '~username', params: { username: user } }"
@@ -497,7 +497,7 @@ watch(lastExecutionTime, () => {
497497
<form class="flex items-center gap-2" @submit.prevent="handleCreateTeam">
498498
<div class="flex-1 flex items-center">
499499
<span
500-
class="px-2 py-1.5 font-mono text-sm text-fg-subtle bg-bg border border-r-0 border-border rounded-l"
500+
class="px-2 py-1.5 font-mono text-sm text-fg-subtle bg-bg border border-ie-0 border-border rounded-is"
501501
>
502502
{{ orgName }}:
503503
</span>
@@ -509,7 +509,7 @@ watch(lastExecutionTime, () => {
509509
name="new-team-name"
510510
:placeholder="$t('org.teams.team_name_placeholder')"
511511
v-bind="noCorrect"
512-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-r text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
512+
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
513513
/>
514514
</div>
515515
<button

‎app/components/PackageDeprecatedTree.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ const bannerColor = 'border-purple-600/40 bg-purple-500/10 text-purple-700 dark:
2424
// Styling for each depth level
2525
const depthStyles = {
2626
root: {
27-
bg: 'bg-purple-500/5 border-l-2 border-l-purple-600',
27+
bg: 'bg-purple-500/5 border-is-2 border-is-purple-600',
2828
text: 'text-fg',
2929
},
3030
direct: {
31-
bg: 'bg-purple-500/5 border-l-2 border-l-purple-500',
31+
bg: 'bg-purple-500/5 border-is-2 border-is-purple-500',
3232
text: 'text-fg-muted',
3333
},
3434
transitive: {
35-
bg: 'bg-purple-500/5 border-l-2 border-l-purple-400',
35+
bg: 'bg-purple-500/5 border-is-2 border-is-purple-400',
3636
text: 'text-fg-muted',
3737
},
3838
} as const
@@ -48,7 +48,7 @@ function getDepthStyle(depth: DependencyDepth) {
4848
<!-- Header -->
4949
<button
5050
type="button"
51-
class="w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
51+
class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
5252
:aria-expanded="isExpanded"
5353
aria-controls="deprecated-tree-details"
5454
@click="isExpanded = !isExpanded"

‎app/components/PackageListToolbar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ function getSortKeyLabelKey(key: SortKey): string {
159159
<select
160160
id="sort-select"
161161
:value="currentSort.key"
162-
class="appearance-none bg-bg-subtle border border-border rounded-md pl-3 pr-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
162+
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
163163
@change="handleSortKeyChange"
164164
>
165165
<option
@@ -173,7 +173,7 @@ function getSortKeyLabelKey(key: SortKey): string {
173173
</option>
174174
</select>
175175
<div
176-
class="absolute right-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
176+
class="absolute inset-ie-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
177177
aria-hidden="true"
178178
>
179179
<span class="i-carbon-chevron-down w-4 h-4" />

‎app/components/PackageReplacement.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const docPath = computed(() => {
5151
:href="mdnUrl"
5252
target="_blank"
5353
rel="noopener noreferrer"
54-
class="inline-flex items-center gap-1 ml-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
54+
class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
5555
>
5656
{{ $t('package.replacement.mdn') }}
5757
<span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
@@ -61,7 +61,7 @@ const docPath = computed(() => {
6161
:href="docPath"
6262
target="_blank"
6363
rel="noopener noreferrer"
64-
class="inline-flex items-center gap-1 ml-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
64+
class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
6565
>
6666
{{ $t('package.replacement.learn_more') }}
6767
<span class="i-carbon-launch w-3 h-3" aria-hidden="true" />

0 commit comments

Comments
 (0)