[TASK] Make contextmenu reading direction aware

Resolves: #101953
Releases: main, 12.4
Change-Id: I1b0d715a96ee914dc8f9787089406457b750df2e
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81066
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>

Build/Sources/Sass/component/_contextmenu.scss

@@ -2,16 +2,23 @@
 // Context Menu
 //
 .context-menu {
+    color-scheme: var(--typo3-component-color-scheme);
     font-size: var(--typo3-component-font-size);
     line-height: var(--typo3-component-line-height);
     padding: 2px;
     position: absolute;
-    z-index: 310;
+    z-index: 1000;
     color: var(--typo3-component-color);
     border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
     background-color: var(--typo3-component-bg);
-    box-shadow: var(--typo3-component-box-shadow);
+    box-shadow: var(--typo3-component-box-shadow-strong);
     border-radius: var(--typo3-component-border-radius);
+    max-height: calc(100% - 20px);
+    max-width: calc(100% - 20px);
+    margin: 0;
+    overflow-y: auto;
+    top: 0;
+    inset-inline-start: 0;
 
     &-group {
         position: relative;
@@ -24,6 +31,15 @@
         min-width: 150px;
     }
 
+    &-divider {
+        padding: 0;
+        height: 0;
+        margin-top: var(--typo3-list-item-padding-y);
+        margin-bottom: var(--typo3-list-item-padding-y);
+        border-top: var(--typo3-component-border-width) solid var(--typo3-component-border-color) !important;
+        outline: none;
+    }
+
     &-item {
         position: relative;
         display: flex;
@@ -52,27 +68,22 @@
         }
 
         &-icon {
+            user-select: none;
             flex-shrink: 0;
             flex-grow: 0;
             width: var(--icon-size-small);
         }
 
         &-label {
+            user-select: none;
             flex-grow: 1;
         }
 
         &-indicator {
+            user-select: none;
             flex-shrink: 0;
             flex-grow: 0;
             width: var(--icon-size-small);
         }
-
-        &-divider {
-            padding: 0;
-            height: 0;
-            margin-top: var(--typo3-list-item-padding-y);
-            margin-bottom: var(--typo3-list-item-padding-y);
-            border-top: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
-        }
     }
 }

Build/Sources/Sass/component/_root.scss

@@ -8,11 +8,13 @@
     --typo3-font-family: var(--typo3-font-family-sans-serif);
     --typo3-font-family-code: var(--typo3-font-family-monospace);
     --typo3-spacing: 1rem;
+    --typo3-color-scheme: auto;
 
     // Header
     --typo3-header-font-family: "Source Sans 3", sans-serif;
 
     // Light
+    --typo3-light-color-scheme: light;
     --typo3-light-color: #{$body-color};
     --typo3-light-primary-color: #{$primary};
     --typo3-light-secondary-color: #{tint-color($body-color, 40%)};
@@ -34,6 +36,7 @@
     --typo3-light-disabled-border-color: transparent;
 
     // Dark
+    --typo3-dark-color-scheme: dark;
     --typo3-dark-color: #{$white};
     --typo3-dark-primary-color: #{tint-color($primary, 40%)};
     --typo3-dark-secondary-color: #{shade-color($white, 40%)};
@@ -55,6 +58,7 @@
     --typo3-dark-disabled-border-color: transparent;
 
     // Component
+    --typo3-component-color-scheme: var(--typo3-light-color-scheme);
     --typo3-component-color: var(--typo3-light-color);
     --typo3-component-primary-color: var(--typo3-light-primary-color);
     --typo3-component-secondary-color: var(--typo3-light-secondary-color);
@@ -69,6 +73,7 @@
     --typo3-component-padding-y: .75rem;
     --typo3-component-padding-x: 1rem;
     --typo3-component-box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
+    --typo3-component-box-shadow-strong: 0 2px 4px rgba(0, 0, 0, .5);
     --typo3-component-hover-color: var(--typo3-light-hover-color);
     --typo3-component-hover-bg: var(--typo3-light-hover-bg);
     --typo3-component-hover-border-color: var(--typo3-light-hover-border-color);
@@ -120,6 +125,7 @@
 }
 
 @mixin lightmode {
+    --typo3-component-color-scheme: var(--typo3-light-color-scheme);
     --typo3-component-color: var(--typo3-light-color);
     --typo3-component-primary-color: var(--typo3-light-primary-color);
     --typo3-component-secondary-color: var(--typo3-light-secondary-color);
@@ -142,6 +148,7 @@
 }
 
 @mixin darkmode {
+    --typo3-component-color-scheme: var(--typo3-dark-color-scheme);
     --typo3-component-color: var(--typo3-dark-color);
     --typo3-component-primary-color: var(--typo3-dark-primary-color);
     --typo3-component-secondary-color: var(--typo3-dark-secondary-color);