feat: implement video controls and pop-out functionality in Video component

src/colors.css.ts

@@ -236,3 +236,197 @@ export const butterTheme = createTheme(color, {
     OnContainer: '#F2EED3',
   },
 });
+
+export const discordTheme = createTheme(color, {
+  Background: {
+    Container: '#2B2D31',
+    ContainerHover: '#313338',
+    ContainerActive: '#383A40',
+    ContainerLine: '#404249',
+    OnContainer: '#DBDEE1',
+  },
+
+  Surface: {
+    Container: '#313338',
+    ContainerHover: '#383A40',
+    ContainerActive: '#404249',
+    ContainerLine: '#4E505A',
+    OnContainer: '#DBDEE1',
+  },
+
+  SurfaceVariant: {
+    Container: '#383A40',
+    ContainerHover: '#404249',
+    ContainerActive: '#4E505A',
+    ContainerLine: '#5C5E68',
+    OnContainer: '#DBDEE1',
+  },
+
+  Primary: {
+    Main: '#5865F2',
+    MainHover: '#4752C4',
+    MainActive: '#3C45A5',
+    MainLine: '#343B8F',
+    OnMain: '#FFFFFF',
+    Container: '#4752C4',
+    ContainerHover: '#3C45A5',
+    ContainerActive: '#343B8F',
+    ContainerLine: '#2D3377',
+    OnContainer: '#E7E9FD',
+  },
+
+  Secondary: {
+    Main: '#B5BAC1',
+    MainHover: '#949BA4',
+    MainActive: '#80858E',
+    MainLine: '#6D7178',
+    OnMain: '#060607',
+    Container: '#4E5058',
+    ContainerHover: '#5C5E68',
+    ContainerActive: '#6A6D75',
+    ContainerLine: '#80858E',
+    OnContainer: '#E3E5E8',
+  },
+
+  Success: {
+    Main: '#23A55A',
+    MainHover: '#1F8F4F',
+    MainActive: '#1C7F46',
+    MainLine: '#196F3D',
+    OnMain: '#FFFFFF',
+    Container: '#1F8F4F',
+    ContainerHover: '#1C7F46',
+    ContainerActive: '#196F3D',
+    ContainerLine: '#165F34',
+    OnContainer: '#D4F2E1',
+  },
+
+  Warning: {
+    Main: '#F0B232',
+    MainHover: '#D69B2B',
+    MainActive: '#C18B27',
+    MainLine: '#AD7C23',
+    OnMain: '#2E2309',
+    Container: '#8B6A1C',
+    ContainerHover: '#9C771F',
+    ContainerActive: '#AD8422',
+    ContainerLine: '#BE9125',
+    OnContainer: '#FCEDC9',
+  },
+
+  Critical: {
+    Main: '#F23F43',
+    MainHover: '#D73437',
+    MainActive: '#C12D30',
+    MainLine: '#AB272A',
+    OnMain: '#FFFFFF',
+    Container: '#A12D2F',
+    ContainerHover: '#B23235',
+    ContainerActive: '#C3373B',
+    ContainerLine: '#D43C40',
+    OnContainer: '#FDD7D8',
+  },
+
+  Other: {
+    FocusRing: 'rgba(88, 101, 242, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 0.8)',
+    Overlay: 'rgba(0, 0, 0, 0.85)',
+  },
+});
+
+export const discordDarkerTheme = createTheme(color, {
+  Background: {
+    Container: '#1E1F22',
+    ContainerHover: '#232428',
+    ContainerActive: '#2A2C31',
+    ContainerLine: '#313338',
+    OnContainer: '#E3E5E8',
+  },
+
+  Surface: {
+    Container: '#232428',
+    ContainerHover: '#2A2C31',
+    ContainerActive: '#313338',
+    ContainerLine: '#3B3E45',
+    OnContainer: '#E3E5E8',
+  },
+
+  SurfaceVariant: {
+    Container: '#2A2C31',
+    ContainerHover: '#313338',
+    ContainerActive: '#3B3E45',
+    ContainerLine: '#45474D',
+    OnContainer: '#E3E5E8',
+  },
+
+  Primary: {
+    Main: '#5865F2',
+    MainHover: '#4752C4',
+    MainActive: '#3C45A5',
+    MainLine: '#343B8F',
+    OnMain: '#FFFFFF',
+    Container: '#4752C4',
+    ContainerHover: '#3C45A5',
+    ContainerActive: '#343B8F',
+    ContainerLine: '#2D3377',
+    OnContainer: '#E7E9FD',
+  },
+
+  Secondary: {
+    Main: '#B5BAC1',
+    MainHover: '#949BA4',
+    MainActive: '#80858E',
+    MainLine: '#6D7178',
+    OnMain: '#060607',
+    Container: '#3B3E45',
+    ContainerHover: '#45474D',
+    ContainerActive: '#4F5158',
+    ContainerLine: '#5C5E68',
+    OnContainer: '#E3E5E8',
+  },
+
+  Success: {
+    Main: '#23A55A',
+    MainHover: '#1F8F4F',
+    MainActive: '#1C7F46',
+    MainLine: '#196F3D',
+    OnMain: '#FFFFFF',
+    Container: '#1F8F4F',
+    ContainerHover: '#1C7F46',
+    ContainerActive: '#196F3D',
+    ContainerLine: '#165F34',
+    OnContainer: '#D4F2E1',
+  },
+
+  Warning: {
+    Main: '#F0B232',
+    MainHover: '#D69B2B',
+    MainActive: '#C18B27',
+    MainLine: '#AD7C23',
+    OnMain: '#2E2309',
+    Container: '#8B6A1C',
+    ContainerHover: '#9C771F',
+    ContainerActive: '#AD8422',
+    ContainerLine: '#BE9125',
+    OnContainer: '#FCEDC9',
+  },
+
+  Critical: {
+    Main: '#F23F43',
+    MainHover: '#D73437',
+    MainActive: '#C12D30',
+    MainLine: '#AB272A',
+    OnMain: '#FFFFFF',
+    Container: '#A12D2F',
+    ContainerHover: '#B23235',
+    ContainerActive: '#C3373B',
+    ContainerLine: '#D43C40',
+    OnContainer: '#FDD7D8',
+  },
+
+  Other: {
+    FocusRing: 'rgba(88, 101, 242, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 0.9)',
+    Overlay: 'rgba(0, 0, 0, 0.9)',
+  },
+});