Adapts video timeline to dark mode.

Author: ricardoantoniocm

web/libs/editor/src/components/Timeline/Controls.scss

@@ -52,6 +52,7 @@
     height: 36px;
     color: var(--color-neutral-content);
     border: 1px solid transparent;
+    cursor: pointer;
 
     &:hover {
       border: 1px solid var(--color-neutral-border);

web/libs/editor/src/components/Timeline/Views/Frames/Frames.scss

@@ -22,7 +22,7 @@
     z-index: 3;
     background-color: var(--color-neutral-surface);
     position: absolute;
-    box-shadow: -1px 0 0 rgb(0 0 0 / 5%);
+    box-shadow: -1px 0 0 rgb(var(--color-neutral-shadow-raw) / 5%);
   }
 
   &__filler {
@@ -37,7 +37,7 @@
     inset: 0 0 0 var(--offset);
     z-index: 1;
     position: absolute;
-    background-color: rgb(0 0 0 / 5%);
+    background-color: rgb(var(--color-neutral-shadow-raw) / 5%);
   }
 
   &__scroll {
@@ -63,8 +63,8 @@
     z-index: 2;
     position: absolute;
     width: var(--frame-size);
-    box-shadow: inset 0 1px var(--sand_900), inset 0 -1px var(--sand_900);
-    background: linear-gradient(0deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 5%)), var(--sand_100);
+    box-shadow: inset 0 1px var(--color-neutral-border), inset 0 -1px var(--color-neutral-border);
+    background: linear-gradient(0deg, rgb(var(--color-neutral-shadow-raw) / 5%), rgb(var(--color-neutral-shadow-raw) / 5%)), var(--color-neutral-background);
 
     &::before {
       inset: -5px;
@@ -83,7 +83,7 @@
       display: block;
       position: absolute;
       pointer-events: none;
-      background: linear-gradient(180deg, rgb(0 0 0 / 15%) -1.28%, rgb(0 0 0 / 15%) 69.21%, rgb(0 0 0 / 0%) 100%), rgb(0 0 0 / 5%);
+      background: linear-gradient(180deg, rgb(var(--color-neutral-shadow-raw) / 15%) -1.28%, rgb(var(--color-neutral-shadow-raw) / 15%) 69.21%, rgb(var(--color-neutral-shadow-raw) / 0%) 100%), rgb(var(--color-neutral-shadow-raw) / 5%);
     }
   }
 
@@ -95,13 +95,13 @@
     width: var(--frame-size);
     position: absolute;
     pointer-events: none;
-    background: linear-gradient(0deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 5%)), var(--sand_100);
+    background: linear-gradient(0deg, rgb(var(--color-neutral-shadow-raw) / 5%), rgb(var(--color-neutral-shadow-raw) / 5%)), var(--color-neutral-surface);
 
     &::before {
       top: 0;
       left: 50%;
       height: 12px;
-      color: var(--color-neutral-background);
+      color: var(--color-neutral-content-subtler);
       display: flex;
       padding: 0 4px;
       min-width: 100%;
@@ -112,7 +112,7 @@
       position: absolute;
       content: attr(data-frame);
       transform: translateX(-50%);
-      background-color: var(--sand_400);
+      background-color: var(--color-neutral-surface-inset);
     }
   }
 

web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx

@@ -67,10 +67,10 @@ export const Frames: FC<TimelineViewProps> = ({
 
   const background = useMemo(() => {
     const bg = [
-      `repeating-linear-gradient(90deg, #fff 1px, #fff ${step - 1}px, rgba(255,255,255,0) ${
+      `repeating-linear-gradient(90deg, var(--color-neutral-background) 1px, var(--color-neutral-background) ${step - 1}px, rgba(255,255,255,0) ${
         step - 1
       }px, rgba(255,255,255,0) ${step + 1}px)`,
-      "linear-gradient(0deg, #FAFAFA, rgba(255,255,255,0) 50%)",
+      "linear-gradient(0deg, var(--color-neutral-surface), rgba(255,255,255,0) 50%)",
     ];
 
     return bg.join(", ");

web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.scss

@@ -16,8 +16,8 @@
     display: flex;
     padding: 0 8px;
     justify-content: space-between;
-    background: linear-gradient(0deg, var(--hover), var(--hover) 100%), linear-gradient(0deg, #FAFAFA, #FAFAFA 100%);
-    box-shadow: 1px 0 0 rgb(0 0 0 / 5%);
+    background: linear-gradient(0deg, var(--hover), var(--hover) 100%), linear-gradient(0deg, var(--color-neutral-surface), var(--color-neutral-surface) 100%);
+    box-shadow: 1px 0 0 rgb(var(--color-neutral-shadow-raw) / 5%);
   }
 
   &__data {
@@ -29,7 +29,7 @@
 
   &__data-item {
     &_faded {
-      opacity: 0.4;
+      color: var(--color-neutral-content-subtler);
     }
   }
 
@@ -96,12 +96,12 @@
   }
 
   &:hover {
-    --hover: rgb(0 0 0 / 4%);
+    --hover: rgb(var(--color-neutral-shadow-raw) / calc( 8% * var(--shadow-intensity) ));
   }
 
   &_selected,
   &_selected:hover {
-    --hover: rgb(0 0 0 / 8%);
+    --hover: rgb(var(--color-neutral-shadow-raw) / calc( 8% * var(--shadow-intensity) ));
   }
 }