feat(FEC-13630): expose tone ramp in user theme (#853)

### Description of the Changes

- **enhancement**

Expose tone ramp in user theme.

#### Resolves
[FEC-13630](https://kaltura.atlassian.net/browse/FEC-13630)




[FEC-13630]:
https://kaltura.atlassian.net/browse/FEC-13630?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

docs/colors-override.md

@@ -19,7 +19,9 @@ const config = {
       colors: {
         primary: '#da3633',
         live: '#ffff00',
-        playerBackground: '#ffa500'
+        playerBackground: '#ffa500',
+        tone1: '#ffffff',
+        paperSurface: '#f5f5f5'
       }
     }
   }

src/types/user-theme.ts

@@ -5,7 +5,20 @@ export type ColorType = {
   danger: string;
   warning: string;
   live: string;
+  // surface colors
   playerBackground: string;
+  paperSurface: string;
+  elevatedSurface: string;
+  protectionSurface: string;
+  // tone ramp colors
+  tone1: string;
+  tone2: string;
+  tone3: string;
+  tone4: string;
+  tone5: string;
+  tone6: string;
+  tone7: string;
+  tone8: string;
 };
 
 export type UserTheme = {

src/utils/themes-manager.ts

@@ -12,8 +12,17 @@ const cssVarNames = {
   colors: {
     live: '--playkit-live-color',
     playerBackground: '--playkit-player-background-color',
-    paper: '--playkit-paper-color',
-    tone1: '--playkit-tone-1-color'
+    paperSurface: '--playkit-paper-color',
+    elevatedSurface: '--playkit-elevated-color',
+    protectionSurface: '--playkit-protection-color',
+    tone1: '--playkit-tone-1-color',
+    tone2: '--playkit-tone-2-color',
+    tone3: '--playkit-tone-3-color',
+    tone4: '--playkit-tone-4-color',
+    tone5: '--playkit-tone-5-color',
+    tone6: '--playkit-tone-6-color',
+    tone7: '--playkit-tone-7-color',
+    tone8: '--playkit-tone-8-color'
   }
 };