v2 styling (#263)

* feat: implement progress bar on running event * refactor: use event action hook * refactor: align backend data * style: v2 style tweaks * style: v2 style tweaks + ts <Info> * fix: fix delay increment calls * style: v2 style tweaks + ts <Playback> * style: v2 style tweaks + ts <EventEditor> * style: v2 style tweaks + ts <MessageControl> * fix: naming issue with message control socket endpoint * chore: upgrade style dependencies * style: v2 style tweaks + ts <MenuBar> * style: v2 style tweaks + ts <RundownMenu> * style: v2 style tweaks + ts <Playback> * fix: add selected and next information to EventTimer * style: v2 style tweaks + ts <EventBlock> * style: v2 style tweaks + ts <DelayBlock> * style: v2 style tweaks + ts <BlockBlock> * style: v2 style tweaks + ts <QuickEntry> * refactor: extract <TextInput> logic * chore: upgrade build dependencies * chore: folder structure refactor * fix: issue with dependency path in electron * chore: update version in demo db
2026-08-13 03:13:47 +00:00 · 2022-11-27 14:56:09 +01:00
parent 3626b5b357
commit d486d78594
104 changed files with 3027 additions and 3217 deletions
@@ -1,3 +1,5 @@
+@use "./ontimeColours" as *;
+
 $transition-time-action: 0.1s;
 $transition-time-feedback: 0.3s;

@@ -111,15 +113,8 @@ textarea {
 }

 // Define style for a link
-a {
-  &::after {
-    content: '  \2197';
-    color: $ontime-pink;
-  }
-
-  &:hover {
-    color: $ontime-pink;
-  }
+a:hover {
+  color: $ontime-pink;
 }

 // horizontal separator
@@ -1,10 +1,10 @@
-@use "main" as *;
+@use "v2Styles" as *;

 //////////////////////////////////// general app elements

@mixin main-container {
-  background-color: $bg-gray-1000;
-  border: 1px solid $bg-gray-1000;
+  background-color: $bg-container-l1;
+  border: 1px solid $bg-container-l1;
  border-radius: 4px;
 }

@@ -14,7 +14,21 @@
 }

@mixin third-container {
-  background-color: $bg-gray-1100;
+  background-color: $bg-container-l3;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 2px;
 }
+
+@mixin action-link {
+  color: $action-text-color;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+  }
+}
@@ -0,0 +1,108 @@
+// from https://www.genomecolor.space/
+
+$white-1: rgba(255, 255, 255, 0.01);
+$white-3: rgba(255, 255, 255, 0.03);
+$white-7: rgba(255, 255, 255, 0.07);
+$white-9: rgba(255, 255, 255, 0.09);
+$white-10: rgba(255, 255, 255, 0.10);
+$white-13: rgba(255, 255, 255, 0.13);
+
+$gray-50: #f6f6f6;
+$gray-100: #ececec;
+$gray-200: #e2e2e2;
+$gray-300: #cfcfcf;
+$gray-400: #b1b1b1;
+$gray-500: #9d9d9d;
+$gray-600: #8a8a8a;
+$gray-700: #6c6c6c;
+$gray-800: #595959;
+$gray-900: #4c4c4c;
+$gray-1000: #404040;
+$gray-1050: #303030;
+$gray-1100: #2d2d2d;
+$gray-1200: #202020;
+$gray-1300: #1a1a1a;
+$gray-1350: #101010;
+$pure-white: #fff;
+$ui-white: $gray-50;
+$ui-black: $gray-1350;
+
+$orange-50: #FFFAF0;
+$orange-100: #FFF4DF;
+$orange-200: #FFEECE;
+$orange-300: #FFE1AB;
+$orange-400: #FFCC78;
+$orange-500: #FFBC56;
+$orange-600: #FFAB33;
+$orange-700: #E69000;
+$orange-800: #D27C00;
+$orange-900: #B46D00;
+$orange-1000: #975E00;
+$orange-1100: #6A4400;
+$orange-1200: #4C3200;
+$orange-1300: #3D2900;
+$orange-1350: #2E1F00;
+
+$green-50: #EDFAEE;
+$green-100: #DCF4DE;
+$green-200: #CBEECF;
+$green-300: #A9E0B0;
+$green-400: #77C785;
+$green-500: #55B469;
+$green-600: #339E4E;
+$green-700: #087A27;
+$green-800: #006E1B;
+$green-900: #006415;
+$green-1000: #00570F;
+$green-1100: #004108;
+$green-1200: #003005;
+$green-1300: #002703;
+$green-1350: #001D02;
+
+$blue-50: #F5F7FF;
+$blue-100: #E3EAFF;
+$blue-200: #D2DDFF;
+$blue-300: #AFC4FF;
+$blue-400: #779BE7;
+$blue-500: #578AF4;
+$blue-600: #3E75E8;
+$blue-700: #2B5ABC;
+$blue-800: #0A43B9;
+$blue-900: #0036A6;
+$blue-1000: #002A90;
+$blue-1100: #001A64;
+$blue-1200: #001145;
+$blue-1300: #000D36;
+$blue-1350: #000926;
+
+$red-50: #FFF0F0;
+$red-100: #FFDFDF;
+$red-200: #FFCECE;
+$red-300: #FFABAB;
+$red-400: #FF7878;
+$red-500: #FA5656;
+$red-600: #ED3333;
+$red-700: #D20300;
+$red-800: #C10000;
+$red-900: #B20000;
+$red-1000: #9A0000;
+$red-1100: #6F0000;
+$red-1200: #520000;
+$red-1300: #440000;
+$red-1350: #360000;
+
+$violet-50: #F9F7FE;
+$violet-100: #F3EFFC;
+$violet-200: #E7DFF6;
+$violet-300: #CEBFEC;
+$violet-400: #B8A0E3;
+$violet-500: #AB8DB8;
+$violet-600: #9771D3;
+$violet-700: #8B60CA;
+$violet-800: #8352C6;
+$violet-900: #7945c1;
+$violet-1000: #7248AD;
+$violet-1100: #573486;
+$violet-1200: #3C235F;
+$violet-1300: #301A4D;
+$violet-1350: #231339;
@@ -0,0 +1,47 @@
+@use "./ontimeColours" as *;
+
+$transition-time-action: 0.1s;
+$transition-time-feedback: 0.3s;
+
+$component-border-radius-md: 3px;
+$component-border-radius-sm: 2px;
+
+// semantic colours
+$action-blue: #3182ce;
+$action-text-color: $blue-400;
+$ontime-color: #ff7597;
+$error-red: $red-700;
+$warning-orange: $orange-700;
+$opacity-disabled: 0.4;
+
+// playback colours
+$playback-start: $green-600;
+$ontime-roll: #0274B6;
+$ontime-delay: #F57C13;
+$ontime-delay-text: #E69056;
+$ontime-paused: #c05621;
+$ontime-stop: #E4281E;
+$playback-negative: $red-500;
+
+// interface panels
+$bg-container-l1: $gray-1350;
+$bg-container-l2: $gray-1100;
+$bg-container-l3: $gray-1350;
+
+$box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
+$box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
+
+// interface elements
+$border-color-ondark: $white-10;
+$element-inner-spacing: 4px;
+$element-spacing: 8px;
+$section-spacing: 16px;
+$main-spacing: 32px;
+
+// interface text
+$ontime-font-family: "Open Sans", "Segoe UI", sans-serif;
+$label-gray: $gray-400;
+$secondary-text-gray: $gray-400;
+$section-white: $ui-white;
+$inner-section-text-size: 14px;
+$text-body-size: 15px;
@@ -1,6 +1,9 @@
@use 'main' as *;
@use 'viewerCommon' as *;

+// Text
+$ontime-font-family: "Open Sans", "Segoe UI", sans-serif; // --font-family-override
+
 // General styling
 $accent-color: $ontime-pink; // --accent-color-override
 $delay-color: $delay-text;
@@ -0,0 +1,53 @@
+const commonStyles = {
+  letterSpacing: '0.3px',
+  fontWeight: '400',
+  borderRadius: '3px',
+};
+
+export const ontimeButtonFilled = {
+  ...commonStyles,
+  background: '#2B5ABC', // $blue-700
+  color: '#fff', // pure-white
+  border: '1px solid #2B5ABC', // $blue-700
+  _hover: {
+    backgroundColor: '#0A43B9', // $blue-800
+    border: '1px solid #0A43B9', // $blue-800
+  },
+  _active: {
+    backgroundColor: '#0036A6', // blue-900
+    borderColor: '#002A90', // blue-1000
+  },
+};
+
+export const ontimeButtonOutlined = {
+  ...commonStyles,
+  backgroundColor: '#2d2d2d', // $gray-1100
+  color: '#779BE7', // $blue-400
+  border: '1px solid #779BE7', // $blue-400
+  _hover: {
+    backgroundColor: '#404040', // $gray-1000
+  },
+  _active: {
+    backgroundColor: '#2d2d2d', // $gray-1100
+    borderColor: '#202020', // $gray-12000
+  },
+};
+
+export const ontimeButtonSubtle = {
+  ...commonStyles,
+  backgroundColor: '#303030', // $gray-1050
+  color: '#779BE7', // $blue-400
+  border: '1px solid transparent',
+  _hover: {
+    background: '#404040', // $gray-1000
+  },
+  _active: {
+    backgroundColor: '#2d2d2d', // $gray-1100
+    borderColor: '#202020', // $gray-12000
+  },
+};
+
+export const ontimeButtonSubtleWhite = {
+  ...ontimeButtonSubtle,
+  color: '#f6f6f6', // $gray-50
+};
@@ -0,0 +1,21 @@
+export const ontimeCheckboxOnDark = {
+  control: {
+    border: '1px',
+    borderColor: '#2d2d2d',  // $gray-1100
+    backgroundColor: '#2d2d2d',  // $gray-1100
+    _checked: {
+      borderColor: '#3182ce', // $action-blue
+      backgroundColor: '#3182ce', //$action-blue
+    },
+    _focus: {
+      boxShadow: '0 0 0 1px #578AF4'
+    }
+  },
+  label: {
+    fontWeight: '200',
+    color: '#9d9d9d', // $gray-500
+    _checked: {
+      color: '#779BE7', //$blue-400
+    }
+  },
+};
@@ -0,0 +1,18 @@
+export const ontimeMenuOnDark = {
+  list: {
+    borderRadius: "3px",
+    border: 'none',
+    bg: '#fff', // $gray-50
+  },
+  item: {
+    letterSpacing: '0.15px',
+    color: '#101010', // $gray-1350
+    bg: '#fff', //
+    _hover: {
+      backgroundColor: '#e2e2e2', // $gray-200
+    },
+  },
+  divider: {
+    borderColor: '#cfcfcf', // $gray-200
+  },
+};
@@ -0,0 +1,20 @@
+export const ontimeSelect = {
+  field: {
+    color: '#9d9d9d', // $gray-500
+    borderRadius: '3px',
+    fontWeight: '400',
+    background: '#2d2d2d',  // $gray-1100
+    border: '1px solid transparent',
+    _hover: {
+      background: '#404040', // $gray-1000
+    },
+    _focus: {
+      background: '#404040', // $gray-1000
+      color: '#f6f6f6', // $gray-50
+      border: '1px solid #578AF4', // $blue-500
+    },
+  },
+  icon: {
+    color: '#9d9d9d', // $gray-500
+  },
+};
@@ -0,0 +1,10 @@
+export const ontimeSwitch = {
+  container: {  },
+  track: {
+    background: '#2d2d2d', // $gray-1100
+    _checked: {
+      background: `#2B5ABC`, // $blue-700
+    },
+  },
+  thumb: {},
+};
@@ -0,0 +1,43 @@
+const commonStyles = {
+  borderRadius: '3px',
+  fontWeight: '400',
+  backgroundColor: '#2d2d2d',  // $gray-1100
+  color: '#e2e2e2', // $gray-200
+  border: '1px solid transparent',
+  _hover: {
+    backgroundColor: '#404040', // $gray-1000
+  },
+  _focus: {
+    backgroundColor: '#404040', // $gray-1000
+    color: '#f6f6f6', // $gray-50
+    border: '1px solid #578AF4', // $blue-500
+  },
+  _placeholder: { color: '#9d9d9d' }, // $gray-500
+};
+
+export const ontimeInputFilled = {
+  field: {
+    ...commonStyles,
+  },
+};
+
+export const ontimeTextAreaFilled = {
+  ...commonStyles,
+};
+
+export const ontimeTextAreaFilledOnLight = {
+  borderRadius: '3px',
+  fontWeight: '400',
+  backgroundColor: '#ececec',  // $gray-100
+  color: '#202020', // $gray-1200
+  border: '1px solid transparent',
+  _hover: {
+    backgroundColor: '#cfcfcf', // $gray-300
+  },
+  _focus: {
+    backgroundColor: '#cfcfcf', // $gray-300
+    color: '#101010',
+    border: '1px solid #578AF4', // $blue-500
+  },
+  _placeholder: { color: '#9d9d9d' }, // $gray-500
+}
@@ -0,0 +1,12 @@
+export const ontimeTooltip = {
+  _light: {
+    backgroundColor: '#2d2d2d',
+    color: '#779BE7',
+    padding: '2px 8px',
+  },
+  _dark: {
+    backgroundColor: '#2d2d2d',
+    color: '#779BE7',
+    padding: '2px 8px',
+  },
+};
@@ -1,50 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-
-const theme = extendTheme({
-  components: {
-    Button: {
-      baseStyle: {
-        borderRadius: '3px',
-      },
-    },
-    Input: {
-      baseStyle: {
-        field: {
-          borderRadius: 3,
-        },
-      },
-      sizes: {},
-      variants: {
-        filled: {
-          field: {
-            backgroundColor: 'rgba(255, 255, 255, 0.03)',
-            _hover: {
-              backgroundColor: 'rgba(255, 255, 255, 0.13)',
-            },
-          },
-        },
-      },
-      defaultProps: {
-        variant: null, // null here
-      },
-    },
-    Textarea: {
-      baseStyle: {
-        borderRadius: 3,
-      },
-      variants: {
-        filled: {
-          backgroundColor: 'rgba(255, 255, 255, 0.03)',
-          _hover: {
-            backgroundColor: 'rgba(255, 255, 255, 0.13)',
-          },
-        },
-      },
-      defaultProps: {
-        variant: null, // null here
-      },
-    },
-  },
-});
-
-export default theme;
@@ -0,0 +1,88 @@
+import { extendTheme } from '@chakra-ui/react';
+
+import {
+  ontimeButtonFilled,
+  ontimeButtonOutlined,
+  ontimeButtonSubtle,
+  ontimeButtonSubtleWhite,
+} from './ontimeButton';
+import { ontimeCheckboxOnDark } from './ontimeCheckbox';
+import { ontimeMenuOnDark } from './ontimeMenu';
+import { ontimeSelect } from './ontimeSelect';
+import { ontimeSwitch } from './ontimeSwitch';
+import {
+  ontimeInputFilled,
+  ontimeTextAreaFilled,
+  ontimeTextAreaFilledOnLight,
+} from './ontimeTextInputs';
+import { ontimeTooltip } from './ontimeTooltip';
+
+const theme = extendTheme({
+  components: {
+    Button: {
+      baseStyle: {
+        borderRadius: '3px',
+      },
+      variants: {
+        'ontime-filled': { ...ontimeButtonFilled },
+        'ontime-outlined': { ...ontimeButtonOutlined },
+        'ontime-subtle': { ...ontimeButtonSubtle },
+        'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
+      },
+    },
+    Checkbox: {
+      variants: {
+        'ontime-ondark': { ...ontimeCheckboxOnDark },
+      },
+    },
+    Editable: {
+      baseStyle: {
+        input: {
+          borderRadius: '2px',
+          width: '100%',
+        },
+        preview: {
+          width: '100%',
+        },
+      },
+    },
+    Input: {
+      baseStyle: {
+        borderRadius: '2px',
+        border: '1px',
+      },
+      variants: {
+        'ontime-filled': { ...ontimeInputFilled },
+      },
+    },
+    Textarea: {
+      baseStyle: {
+        borderRadius: '3px',
+      },
+      variants: {
+        'ontime-filled': { ...ontimeTextAreaFilled },
+        'ontime-filled-onlight': { ...ontimeTextAreaFilledOnLight },
+      },
+    },
+    Tooltip: {
+      baseStyle: { ...ontimeTooltip},
+    },
+    Switch: {
+      variants: {
+        'ontime': { ...ontimeSwitch },
+      },
+    },
+    Select: {
+      variants: {
+        'ontime': { ...ontimeSelect },
+      },
+    },
+    Menu: {
+      variants: {
+        'ontime-on-dark': { ...ontimeMenuOnDark },
+      },
+    },
+  },
+});
+
+export default theme;