Annex to #6138 (#6226)

* fix: wronge styles when applying RTL 

it was `top-0 left-0 ...` by wrong I made it `inset-x-0`.

* fix wrong styles

* fix wrong styles

* style canary icon with RTL-friendly styles

* chore: utilize mx-* instead of me-* & ms-*

* utilize relative styles

* chore: use mx-* instead of me-* & ms-*

* style canary icon with RTL-frindly styles

* Update OpenInTypeScriptPlayground.tsx

src/components/Layout/HomeContent.js

@@ -849,7 +849,7 @@ function ExampleLayout({
               {overlayStyles.map((styles, i) => (
                 <div
                   key={i}
-                  className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
+                  className="top-0 start-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
                   style={styles}
                 />
               ))}

src/components/Layout/Sidebar/SidebarButton.tsx

@@ -31,7 +31,7 @@ export function SidebarButton({
       })}>
       <button
         className={cn(
-          'p-2 pe-2 ps-5 w-full rounded-s-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'p-2 pe-2 ps-5 w-full rounded-e-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
           {
             'p-2 text-base': level > 1,
             'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -58,7 +58,7 @@ export function SidebarLink({
       passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
-        'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+        'p-2 pe-2 w-full rounded-none lg:rounded-e-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
         {
           'text-sm ps-6': level > 0,
           'ps-5': level < 2,
@@ -78,7 +78,7 @@ export function SidebarLink({
         {canary && (
           <IconCanary
             title="This feature is available in the latest Canary"
-            className="ml-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+            className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}
       </div>

src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ms-2 md:ms-1"
       title="Open in CodeSandbox">
       <IconNewPage
-        className="inline ms-1 me-1 relative top-[1px]"
+        className="inline mx-1 relative top-[1px]"
         width="1em"
         height="1em"
       />

src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx

@@ -16,7 +16,7 @@ export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
       target="_blank"
       rel="noreferrer">
       <IconNewPage
-        className="inline ml-1 mr-1 relative top-[1px]"
+        className="inline mx-1 relative top-[1px]"
         width="1em"
         height="1em"
       />

src/components/MDX/Sandpack/ResetButton.tsx

@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
       onClick={onReset}
       title="Reset Sandbox"
       type="button">
-      <IconRestart className="inline ms-1 me-1 relative" /> Reset
+      <IconRestart className="inline mx-1 relative" /> Reset
     </button>
   );
 }

src/components/PageHeading.tsx

@@ -35,13 +35,13 @@ function PageHeading({
           {canary && (
             <IconCanary
               title="This feature is available in the latest Canary"
-              className="ml-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
+              className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}
           {status ? <em>—{status}</em> : ''}
         </H1>
         {description && (
-          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-gray-90 leading-large">
+          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-primary leading-large">
             {description}
           </p>
         )}